freeCodeCamp/guide/arabic/css/css-buttons/index.md

title, localeTitle

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