Làm thế nào để tạo: nút cảnh báo

Làm thế nào để thiết kế phong cách của nút cảnh báo?

Bước 1 - Thêm HTML:

<button class="btn success">Thành công</button>
<button class="btn info">Thông tin</button>
<button class="btn warning">Cảnh báo</button>
<button class="btn danger">Nguy hiểm</button>
<button class="btn default">Mặc định</button>

Bước 2 - Thêm CSS:

.btn {
  border: none; /* Xóa bỏ viền */
  color: white; /* Thêm màu chữ */
  padding: 14px 28px; /* Thêm một số khoảng cách trong */
  cursor: pointer; /* Thêm con trỏ chuột khi di chuột qua */
}
.success {background-color: #04AA6D;} /* Xanh lá cây */
.success:hover {background-color: #46a049;}
.info {background-color: #2196F3;} /* Xanh dương */
.info:hover {background: #0b7dda;}
.warning {background-color: #ff9800;} /* Cam */
.warning:hover {background: #e68a00;}
.danger {background-color: #f44336;} /* Đỏ */
.danger:hover {background: #da190b;}
.default {background-color: #e7e7e7; color: black;} /* Xám */
.default:hover {background: #ddd;}

Thử trực tiếp

Trang liên quan

Giáo trình:Nút CSS