چگونه ایجاد کنیم: دکمه‌های متن

چگونه سبک دکمه‌های متن را تنظیم کنیم

قدم اول - اضافه کردن 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