如何创建：文本按钮

متن کے بٹن کی شکل کو کیسٹ کرسکتا ہو؟

پہلے قدم - ایچ تی ایمل اضافہ کریں:

<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 پیکسل;
  مکان‌نما: اشاره‌گر;
  نمایش: بلوک درون خط;
}
/* On mouse-over */
.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