دکمه‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
CSS پیشرفته
۱گوشه‌های گرد
۲کادر تصاویر
۳پس‌زمینه‌ها
۴رنگ‌ها
۵Gradientها
۶سایه‌ها
۷افکت‌های متن
۸قلم‌های وب
۹2D Transforms
۱۰3D Transforms
۱۱Transitions
۱۲انیمیشن‌ها
۱۳Tooltip
۱۴استایل‌دهی تصاویر
۱۵ویژگی object-fit
۱۶دکمه‌ها
۱۷مثال‌های صفحه‌بندی (Pagination)
۱۸ستون‌های متعدد
۱۹رابط کاربری
۲۰متغیرها
۲۱Box Sizing
۲۲Flexbox
۲۳Media Queries
۲۴مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

نحوه استایل دهی دکمه‌ها با استفاده از CSS را می آموزید. [۱]

استایل دهی پایه به دکمه

مثال
 1 .button {
 2   background-color: #4CAF50; /* Green */
 3   border: none;
 4   color: white;
 5   padding: 15px 32px;
 6   text-align: center;
 7   text-decoration: none;
 8   display: inline-block;
 9   font-size: 16px;
10 }


رنگ های دکمه

از ویژگی background-color برای تغییر رنگ یک دکمه استفاده کنید:

مثال
1 .button1 {background-color: #4CAF50;} /* Green */
2 .button2 {background-color: #008CBA;} /* Blue */
3 .button3 {background-color: #f44336;} /* Red */
4 .button4 {background-color: #e7e7e7; color: black;} /* Gray */
5 .button5 {background-color: #555555;} /* Black */


اندازه‌های دکمه

از ویژگی font-size برای تغییر اندازه قلم یک دکمه استفاده کنید:

مثال
1 .button1 {font-size: 10px;}
2 .button2 {font-size: 12px;}
3 .button3 {font-size: 16px;}
4 .button4 {font-size: 20px;}
5 .button5 {font-size: 24px;}


از ویژگی padding برای تغییر padding دکمه استفاده کنید:

مثال
1 .button1 {padding: 10px 24px;}
2 .button2 {padding: 12px 28px;}
3 .button3 {padding: 14px 40px;}
4 .button4 {padding: 32px 16px;}
5 .button5 {padding: 16px;}


دکمه‌های گرد شده

از ویژگی border-radius برای اضافه‌کردن گوشه‌های گرد به دکمه استفاده کنید:

مثال
1 .button1 {border-radius: 2px;}
2 .button2 {border-radius: 4px;}
3 .button3 {border-radius: 8px;}
4 .button4 {border-radius: 12px;}
5 .button5 {border-radius: 50%;}


کادرهای دکمه رنگ شده

از ویژگی border برای اضافه‌کردن یک کادر رنگ شده به دکمه استفاده کنید:

مثال
1 .button1 {
2   background-color: white;
3   color: black;
4   border: 2px solid #4CAF50; /* Green */
5 }
6 ...


دکمه‌های Hoverable

از انتخابگر :hover برای تغییر استایل دکمه در هنگامی که نشانه‌گر ماوس را روی آن قرار می‌دهید استفاده کنید.

نکته: از ویژگی transition-duration برای تعیین سرعت جلوه "hover" استفاده کنید:

مثال
1 .button {
2   transition-duration: 0.4s;
3 }
4 
5 .button:hover {
6   background-color: #4CAF50; /* Green */
7   color: white;
8 }
9 ...


دکمه‌های سایه دار

از ویژگی box-shadow برای اضافه‌کردن سایه‌ها به دکمه استفاده کنید:

مثال
1 .button1 {
2   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
3 }
4 
5 .button2:hover {
6   box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
7 }


دکمه‌های غیرفعال

از ویژگی opacityبرای اضافه‌کردن شفافیت transparency به دکمه استفاده کنید (یک نمای «غیرفعال» ایجاد کنید)

نکته: همچنین می‌توانید ویژگی cursor را با مقدار "not-allowed" اضافه کنید، که زمانی که شما نشانه‌گر ماوس را روی دکمه قرار می‌دهید، یک علامت " no parking" نمایش خواهد داد:

مثال
1 .disabled {
2   opacity: 0.6;
3   cursor: not-allowed;
4 }


عرض دکمه

به صورت پیش‌فرض، اندازه دکمه با توجه به محتوای متنی آن تعیین می‌شود (به اندازهٔ پهنای محتوای خود). از ویژگی width برای تغییر عرض دکمه استفاده کنید:

مثال
1 .button1 {width: 250px;}
2 .button2 {width: 50%;}
3 .button3 {width: 100%;}


گروه‌های دکمه

حاشیه ها را حذف کنید و float:left را به هر دکمه اضافه کنید تا یک گروه دکمه بسازید:

مثال
.button {
  float: left;
}


گروه دکمه کادر دار

از ویژگی border برای ساخت یک گروه دکمه کادر دار استفاده کنید:

مثال
1 .button {
2   float: left;
3   border: 1px solid green;
4 }


گروه دکمه عمودی

از display:block به جای float:leftبرای گروه‌بندی دکمه‌ها به صورت زیر هم به جای کنار هم استفاده کنید:

مثال
.button {
  display: block;
}


دکمه روی تصویر

مشاهدهٔ نتیجه»


دکمه‌های animate شده

مثال

اضافه‌کردن یک فلش هنگام hover:

مشاهدهٔ نتیجه»


مثال

اضافه‌کردن یک جلوه «کلیک شده» هنگام کلیک:

مشاهدهٔ نتیجه»


مثال

ظاهر شدن هنگام قرارگیری ماوس روی کنترل

مشاهدهٔ نتیجه»


مثال

اضافه‌کردن یک جلوه "ripple" هنگام کلیک:

مشاهدهٔ نتیجه»


منابع آموزشی