كيفية إنشاء: زر التحذير

كيفية تصميم نمط زر التحذير

مرحلة 1 - اضافه 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>

مرحلة 2 - اضافه CSS:

.btn {
  border: none; /*حذف الحدود*/
  color: white; /*اضافه لون النص*/
  padding: 14px 28px; /*اضافه بعض الهوامش الداخلية*/
  cursor: pointer; /*اضافه كورسور فأرة عند التلوث*/
}
.success {background-color: #04AA6D;} /*绿色*/
.success:hover {background-color: #46a049;}
.info {background-color: #2196F3;} /*蓝色*/
.info:hover {background: #0b7dda;}
.warning {background-color: #ff9800;} /*橙色*/
.warning:hover {background: #e68a00;}
.danger {background-color: #f44336;} /*红色*/
.danger:hover {background: #da190b;}
.default {background-color: #e7e7e7; color: black;} /*灰色*/
.default:hover {background: #ddd;}

تست کنید

صفحات مرتبط

آموزش:دکمه CSS