دکمه‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

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

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

مثال

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}


رنگ های دکمه

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

مثال

.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */


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

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

مثال

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}


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

مثال

.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}


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

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

مثال

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}


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

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

مثال

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50; /* Green */
}
...


دکمه‌های Hoverable

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

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

مثال

.button {
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #4CAF50; /* Green */
  color: white;
}
...


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

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

مثال

.button1 {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}


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

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

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

مثال

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


عرض دکمه

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

مثال

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}


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

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

مثال

.button {
  float: left;
}


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

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

مثال

.button {
  float: left;
  border: 1px solid green;
}


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

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

مثال

.button {
  display: block;
}


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

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


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

مثال

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

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


مثال

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

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


مثال

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

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


مثال

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

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


منابع آموزشی