كيفية إنشاء: الأزرار النصية

كيفية ضبط نمط الأزرار النصية

الخطوة الأولى - إضافة HTML:

<button class="btn success">Success</button>
<button class="btn info">Info</button>
<button class="btn warning">Warning</button>
<button class="btn danger">Danger</button>
<button class="btn default">Default</button>

الخطوة الثانية - إضافة CSS:

للحصول على مظهر "زر نصي"، قمنا بإزالة اللون الخلفي الافتراضي والحدود:

.btn {
  الحدود: لا شيء;
  لون الخلفية: وراثي;
  الملء: 14 بكسل 28 بكسل;
  حجم الخط: 16 بكسل;
  المؤشر: إشارة اليد;
  العرض: قطعة داخلية;
}
/* عند التمرير فوقه */
.btn:hover {الخلفية: #eee;}
.success {اللون: الأخضر;}
.info {اللون: الأزرق الباستيل;}
.warning {اللون: البرتقالي;}
.danger {اللون: الأحمر;}
.default {اللون: الأسود;}

جرب بنفسك

زر نصي به خلفية منفردة

نص زر به خلفية لونية محددة عند التمرير فوقه:

.btn {
    الحدود: لا شيء;
    لون الخلفية: وراثي;
    الملء: 14 بكسل 28 بكسل;
    حجم الخط: 16 بكسل;
    المؤشر: إشارة اليد;
    العرض: قطعة داخلية;
}
/* الأخضر */
.success {
    اللون: الأخضر;
}
.success:hover {
    لون الخلفية: #04AA6D;
    اللون: الأبيض;
}
/* الأزرق */
.info {
    اللون: الأزرق الباستيل;
}
.info:hover {
    الخلفية: #2196F3;
    اللون: الأبيض;
}
/* البرتقالي */
.warning {
    اللون: البرتقالي;
}
.warning:hover {
    الخلفية: #ff9800;
    اللون: الأبيض;
}
/* الأحمر */
.danger {
    اللون: الأحمر;
}
.danger:hover {
    الخلفية: #f44336;
    اللون: الأبيض;
}
/* اللون الرمادي */
.default {
    اللون: الأسود;
}
.default:hover {
    background: #e7e7e7;
}

جرب بنفسك

الصفحات ذات الصلة

دليل:زر CSS