دکمه CSS
آموزش نحوه تنظیم استایل دکمه‌ها با استفاده از CSS.
استایل دکمه پایه
مثال
.button {
background-color: #4CAF50; /* سبز */
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;} /* سبز */
.button2 {background-color: #008CBA;} /* آبی */
.button3 {background-color: #f44336;} /* قرمز */
.button4 {background-color: #e7e7e7; color: black;} /* خاکستری */
.button5 {background-color: #555555;} /* سیاه */
اندازه دکمه
لطفاً از font-size ویژگی برای تغییر اندازه فونت دکمه:
مثال
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
لطفاً از 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; /* سبز */
}
...
دکمه‌های قابل مرور
وقتی که موس به بالای دکمه حرکت می‌کند، از :hover انتخابگر می‌تواند سبک دکمه را تغییر دهد.
توجه:لطفاً از transition-duration ویژگی برای تعیین سرعت اثر "مرور":
مثال
.button {
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* سبز */
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);
}
دکمه غیرفعال
لطفاً از شفافیت ویژگی برای اضافه کردن شفافیت به دکمه (ایجاد ظاهر "نافعال")
توجه:شما همچنین می‌توانید ویژگی با ارزش "not-allowed" اضافه کنید cursor ویژگی، وقتی که شما موس را روی دکمه قرار می‌دهید، این ویژگی نشان می‌دهد "نشان ممنوعیت پارک" (نشان ممنوعیت پارک):
مثال
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
عرض دکمه
به طور پیش‌فرض، اندازه دکمه بستگی به محتوای متن دارد (همان عرض محتوا). لطفاً از عرض ویژگی برای تغییر عرض دکمه:
مثال
.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;
}
دکمه‌های انیمیشنی
مثال 1
افزودن پرچم در حالت قرارگیری ماوس:
مثال 2
افزودن اثر فشار کلید در زمان کلیک:
مثال 3
آب‌نما در حالت قرارگیری ماوس:
مثال 4
افزودن اثر آب‌نما در زمان کلیک:
