أزرار CSS

تعلم كيفية استخدام CSS لتحديد أنماط الأزرار.

نمط-زر-أساسي

مثال

.button {
  background-color: #4CAF50; /* Green */
  حافة: لا-وجود;
  color: white;
  ملء: 15px 32px;
  مركز-النص: مركز;
  تزيين-النص: لا-وجود;
  عرض: كتلة-في-الخط;
  حجم-الخط: 16px;
}

تجربة بنفسك

لون-النص

استخدم: لون-الخلفية سمة-الزر: تغيير-لون-الخلفية-للزر;

مثال

.button1 {لون-الخلفية: #4CAF50;} /* أخضر */
.button2 {لون-الخلفية: #008CBA;} /* أزرق */
.button3 {لون-الخلفية: #f44336;} /* أحمر */ 
.button4 {لون-الخلفية: #e7e7e7; لون-النص: أسود;} /* رمادي */ 
.button5 {لون-الخلفية: #555555;} /* أسود */

تجربة بنفسك

حجم-الزر

استخدم: حجم-الخط سمة-الزر: تغيير-حجم-الخط-للزر;

مثال

.button1 {حجم-الخط: 10px;}
.button2 {حجم-الخط: 12px;}
.button3 {حجم-الخط: 16px;}
.button4 {حجم-الخط: 20px;}
.button5 {حجم-الخط: 24px;}

تجربة بنفسك

استخدم: ملء سمة-الزر: تغيير-ملء-الزر;

مثال

.button1 {ملء: 10px 24px;}
.button2 {ملء: 12px 28px;}
.button3 {ملء: 14px 40px;}
.button4 {ملء: 32px 16px;}
.button5 {ملء: 16px;}

تجربة بنفسك

زر-الدوائرية

استخدم: حافة-الدائرة سمة-الزر: إضافة-الدوائر-الرأسية-للزر;

مثال

.button1 {حافة-الدائرة: 2px;}
.button2 {حافة-الدائرة: 4px;}
.button3 {حافة-الدائرة: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

تجربة بنفسك

حافة زر ملونة

استخدم: border إضافة حافة ملونة إلى الزر

مثال

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50; /* Green */
}
...

تجربة بنفسك

زر قابل للتمرير


عند تمرير الفأرة فوق الزر، استخدم :hover الاختيار المميز يمكن تغيير نمط الزر.

نصيحة:استخدم: transition-duration لتحديد سرعة تأثير "hover":

مثال

.button {
  transition-duration: 0.4s;
}
.button:hover {
  background-color: #4CAF50; /* Green */
  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 عند وضع الفأرة فوق الزر، تظهر الخاصية "no parking sign" (إشارة عدم وقوف):

مثال

.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

إضافة تأثير "الرنين" عند النقر:

تجربة بنفسك