如何创建：文本按钮

如何设置文本按钮的样式

第一步 - 添加 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 {اللون: السوداء;}

Kuwanan rarru: rarru

زر نص مع خلفية منفردة:

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

.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;
}

Kuwanan rarru: rarru

Kuwanan rarru: rarru

Kuwanan rarru: rarruKuwanan rarru: rarru