دکمه ها (Buttons)
اینجا با «دکمه های CSS» آشنا می شویم. «دکمه (Button)» یک عنصر برای کلیک است. با CSS می توانیم رنگ، اندازه، گوشه گرد، سایه و رفتار هاور را کنترل کنیم.
استایل پایه دکمه
چند ویژگی مهم: رنگ پس زمینه، رنگ متن، حاشیه، فاصله داخلی، تراز متن، اندازه فونت و نشانگر ماوس.
.button {\n background-color: red;\n border: none;\n color: white;\n padding: 15px 32px;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: 16px;\n cursor: pointer;\n}\nرنگ دکمه
با background-color رنگ پس زمینه را می گذاریم. با color رنگ متن را تعیین می کنیم.
.button1 {\n background-color: #04AA6D;\n}\n.button2 {\n background-color: #008CBA;\n}\n.button3 {\n background-color: #f44336;\n}\n.button4 {\n background-color: #e7e7e7;\n color: black;\n}\n.button5 {\n background-color: #555555;\n}\nاندازه فونت و پدینگ
font-size اندازه متن را عوض می کند. padding فاصله متن تا لبه است.
.button1 {\n font-size: 10px;\n}\n.button2 {\n font-size: 12px;\n}\n.button3 {\n font-size: 16px;\n}\n.button4 {\n font-size: 20px;\n}\n.button5 {\n font-size: 24px;\n}\n.button6 {\n padding: 10px 24px;\n}\n.button7 {\n padding: 12px 28px;\n}\n.button8 {\n padding: 14px 40px;\n}\n.button9 {\n padding: 32px 16px;\n}\n.button10 {\n padding: 16px;\n}\nگوشه گرد با border-radius
border-radius گوشه ها را گرد می کند. مقدار 50% دایره می سازد.
.button1 {\n border-radius: 2px;\n}\n.button2 {\n border-radius: 4px;\n}\n.button3 {\n border-radius: 8px;\n}\n.button4 {\n border-radius: 12px;\n}\n.button5 {\n border-radius: 50%;\n}\nحاشیه دکمه
با border می توانیم خط دور دکمه بسازیم. نوع خط هم قابل تغییر است.
.button1 {\n border: 2px solid #04AA6D;\n}\n.button2 {\n border: 2px dotted #008CBA;\n}\n.button3 {\n border: 2px dashed #f44336;\n}\n.button4 {\n border: 1px solid #e7e7e7;\n}\n.button5 {\n border: 1px solid #555555;\n}\nافکت هاور (Hover)
با :hover هنگام عبور ماوس، استایل عوض می شود. با transition-duration سرعت تغییر را مشخص کن.
.button1 {\n transition-duration: 0.2s;\n}\n.button1:hover {\n background-color: #04AA6D;\n color: white;\n}\n.button2:hover {\n background-color: #008CBA;\n color: white;\n}\n.button3:hover {\n background-color: #f44336;\n color: white;\n}\n.button4:hover {\n background-color: #e7e7e7;\n color: black;\n}\n.button5:hover {\n background-color: #555555;\n color: white;\n}\nسایه دکمه
با box-shadow عمق می دهیم. می توانیم فقط در هاور سایه بدهیم.
.button1 {\n box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.6);\n}\n.button2:hover {\n box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.6);\n}\nنمای «غیرفعال»
opacity شفافیت می سازد. با cursor: not-allowed حس غیرفعال می دهیم.
.disabledbtn {\n opacity: 0.6;\n cursor: not-allowed;\n}\nعرض دکمه
با width می توانیم عرض ثابت یا درصدی بدهیم. درصد واکنش گراست.
.button1 {\n width: 250px;\n}\n.button2 {\n width: 50%;\n}\n.button3 {\n width: 100%;\n}\nگروه افقی دکمه ها
با flex دکمه ها کنار هم می آیند. با flex-wrap در موبایل بشکنند.
.btn-group {\n display: flex;\n flex-wrap: wrap;\n}\n.button {\n background-color: #04AA6D;\n border: none;\n color: white;\n padding: 15px 32px;\n text-align: center;\n text-decoration: none;\n font-size: 16px;\n cursor: pointer;\n}\n.btn-group .button:hover {\n background-color: dodgerblue;\n}\nگروه با حاشیه
برای جلوگیری از دوبرابری مرز، مرز آخرین دکمه را نگه داریم.
.btn-group {\n display: flex;\n flex-wrap: wrap;\n}\n.button {\n background-color: #04AA6D;\n border: 1px solid green;\n color: white;\n padding: 15px 32px;\n text-align: center;\n text-decoration: none;\n font-size: 16px;\n cursor: pointer;\n}\n.btn-group .button:hover {\n background-color: dodgerblue;\n}\n.btn-group .button:not(:last-child) {\n border-right: none;\n}\nگروه عمودی
با flex-direction: column دکمه ها ستونی می شوند.
.btn-group {\n display: flex;\n flex-direction: column;\n}\nدکمه روی تصویر
می توانیم روی تصویر دکمه بگذاریم و با کلاس های موقعیت گذاری وسط چین کنیم.
<div class="container">\n <img src="img_lights.jpg" alt="Image">\n <button class="button">Button</button>\n</div>\nانیمیشن های ساده دکمه
می توانیم فلش هاور، افکت فشرده شدن، فید یا موج کلیک بسازیم.
/* نمونه: فید در هاور */\n.btnfade {\n opacity: 0.7;\n transition-duration: 0.2s;\n}\n.btnfade:hover {\n opacity: 1;\n}\nگام های عملی سریع
- ساخت یک کلاس .button برای استایل پایه.
- افزودن رنگ، اندازه و پدینگ مناسب.
- اضافه کردن هاور، سایه و گوشه گرد.
جمع بندی سریع
- background-color برای پس زمینه است.
- padding فاصله متن تا لبه است.
- border-radius گوشه ها را نرم می کند.
- :hover افکت تعاملی می دهد.
- flex گروه دکمه ها را می چیند.
برای مطالعه مرتبط: دکمه های CSS، طراحی واکنش گرا و انواع ورودی.