استایل دکمه ها در CSS (CSS Buttons)

در این راهنما «استایل دکمه ها (Buttons)» را با CSS مرور می کنیم. سپس با ویژگی های پایه، اندازه، رنگ، گوشه های گرد، سایه، حالت غیرفعال، گروه های افقی/عمودی و افکت های هاور آشنا می شوید.

استایل دکمه ها در CSS: ویژگی های پایه

با CSS می توانید دکمه های HTML را به روش های مختلف استایل دهی کنید. پراپرتی های متداول شامل background-color، color، border، padding، border-radius، box-shadow، text-align، font-size، text-decoration و cursor هستند.

دکمه ها معمولاً با عناصر <button>، <input type="button"> یا یک <a> که شبیه دکمه استایل دهی شده ساخته می شوند.

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

نمونه ساده استایل دهی دکمه برای عناصر مختلف:

.button {  background-color: red;  border: none;  color: white;  padding: 15px 32px;  text-align: center;  text-decoration: none;  display: inline-block;  font-size: 16px;  cursor: pointer;}

رنگ دکمه ها

برای پس زمینه از background-color و برای متن از color استفاده کنید.

.button1 {background-color: #04AA6D;} /* 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 و فاصله متن و کادر با padding تنظیم می شود.

.button1 {font-size: 10px;} .button2 {font-size: 12px;} .button3 {font-size: 16px;} .button4 {font-size: 20px;} .button5 {font-size: 24px;} .p1 {padding: 10px 24px;} .p2 {padding: 12px 28px;} .p3 {padding: 14px 40px;} .p4 {padding: 32px 16px;} .p5 {padding: 16px;}

گوشه های گرد (border-radius)

با border-radius می توانید گوشه ها را از 2px تا 50٪ گرد کنید.

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

کادر دکمه (border)

انواع کادر مثل solid، dotted و dashed را می توانید اعمال کنید.

.button1 {border: 2px solid #04AA6D;} .button2 {border: 2px dotted #008CBA;} .button3 {border: 2px dashed #f44336;} .button4 {border: 1px solid #e7e7e7;} .button5 {border: 1px solid #555555;}

افکت هاور (:hover)

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

.button1:hover {background-color: #04AA6D; color: white;} .button2:hover {background-color: #008CBA; color: white;} .button3:hover {background-color: #f44336; color: white;} .button4:hover {background-color: #e7e7e7; color: black;} .button5:hover {background-color: #555555; color: white;}

نکته: با transition-duration سرعت افکت هاور را مشخص کنید.

سایه دکمه (box-shadow)

با box-shadow می توانید سایه ثابت یا فقط در حالت هاور اضافه کنید.

.button1 {box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);} .button2:hover {box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);}

دکمه غیرفعال (opacity)

برای ظاهر غیرفعال از opacity استفاده کنید و با cursor: not-allowed رفتار نشانگر را تغییر دهید.

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

عرض دکمه (width)

به صورت پیش فرض عرض با متن تعیین می شود؛ با width می توانید مقدار ثابت یا درصدی بدهید.

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

گروه دکمه افقی

برای گروه بندی افقی از display: flex و برای شکست به خط بعد از flex-wrap: wrap استفاده کنید.

.btn-group {display: flex;  flex-wrap: wrap;} .btn-group .button:hover {background-color: dodgerblue;}

گروه دکمه حاشیه دار

با border گروه حاشیه دار بسازید و روی همه دکمه ها اعمال کنید. برای جلوگیری از دوبل شدن کادر، :not(:last-child) را بدون border-right تنظیم کنید.

.btn-group {display: flex;  flex-wrap: wrap;} .button {border: 1px solid green;} .btn-group .button:not(:last-child) {border-right: none;}

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

برای چینش عمودی از flex-direction: column استفاده کنید.

.btn-group {display: flex;  flex-direction: column;}

دکمه روی تصویر و دکمه های انیمیشنی

می توانید دکمه را روی تصویر قرار دهید یا افکت هایی مانند پیکان در هاور، حالت فشرده روی کلیک، فید و افکت موجی اضافه کنید.

نکته: برای کنترل تناسب محتوا روی تصویر، به صفحات object-fit و object-position مراجعه کنید.

منابع و خواندن بیشتر درباره استایل دکمه ها

ماسک گذاری SVG و صفحه بندی CSS تکمیل کننده این مبحث هستند.

MDN: :hover و MDN: background-color توضیحات مرجع و مثال های بیشتر ارائه می کنند.