3.0 KiB
| title | localeTitle |
|---|---|
| CSS Buttons | أزرار CSS |
أزرار CSS
- يمكنك نمط أي زر قابل للنقر (HTML
<button>element)
<button>Click Me</button>
- يبدو الزر الافتراضي كما يلي:
تصميم زر
يمكنك تغيير عدة خصائص لزر لتغيير مظهره.
لإضافة الظلال إلى الزر ، استخدم خاصية box-shadow .
لإضافة شفافية إلى زر لتأثير معطل ، استخدم opacity الخاصية.
لإزالة الهوامش وإنشاء مجموعة زر إضافة float:left/right خاصية float:left/right .
لإنشاء مجموعة أزرار ولكن باستخدام الحدود ، استخدم خاصية float وأضف border property .
لإنشاء مجموعة أزرار عمودية استخدم display: block property .
لون الزر
لتغيير لون خلفية زر ، استخدم خاصية لون الخلفية:
button {background-color: #6ba0f4;}
لإضافة حد ملون إلى زر ، استخدم خاصية الحدود:
button { background-color: #FFF; color: #FFF; border: 2px solid #6ba0f4; }
حجم النص الزر
لتغيير حجم خط النص لأحد الأزرار ، استخدم خاصية حجم الخط:
button {font-size: 20px;}
زر الحشو
لتغيير حشوة زر ، استخدم خاصية الحشو:
button {padding: 15px 30px;}
عرض الزر
لتغيير عرض زر ، بغض النظر عن محتوى النص ، استخدم خاصية العرض:
button {width: 250px;}
أزرار مدورة
لإنشاء أزرار مستديرة ، استخدم خاصية border-radius:
button {border-radius: 50%;}
أزرار Hoverable
لتغيير نمط زر عند تحريك الماوس فوقه ، استخدم: select hover:
button:hover { background-color: #0E2C5B; color: #FFF; }
لتحديد سرعة تأثير التحويم ، استخدم transition-duration الخاصية.
أزرار معاق
لتعطيل زر ، استخدم خاصية المؤشر:
button { cursor: not-allowed; }
معلومات اكثر:
- https://www.w3schools.com/css/css3_buttons.asp
- https://www.w3schools.com/howto/howto css animate_buttons.asp