Bagaimana membuat: tombol peringatan

Bagaimana merancang gaya tombol peringatan?

Langkah pertama - Tambahkan 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>

Langkah kedua - Tambahkan CSS:

.btn {
  batas: tak ada; /* menghapus batas */
  warna: putih; /* menambah warna teks */
  keluarkan: 14px 28px; /* menambah beberapa keluarkan internal */
  kursor: pointer; /* menambah kursor penuding saat mouse di atas */
}
.success {warna-latarbelakang: #04AA6D;} /* hijau */
.success:hover {warna-latarbelakang: #46a049;}
.info {warna-latarbelakang: #2196F3;} /* biru */
.info:hover {latarbelakang: #0b7dda;}
.warning {warna-latarbelakang: #ff9800;} /* jingga */
.warning:hover {latarbelakang: #e68a00;}
.danger {warna-latarbelakang: #f44336;} /* merah */
.danger:hover {latarbelakang: #da190b;}
.default {warna-latarbelakang: #e7e7e7; warna: hitam;} /* abu-abu */
.default:hover {latarbelakang: #ddd;}

Coba sendiri

Halaman yang berhubungan

Panduan:Tombol CSS