Thực hành - tạo các nút cảnh báo

Trong bài này, chúng ta sẽ tạo các nút cảnh báo theo ngữ cảnh bằng HTML và CSS

Các nút cảnh báo theo ngữ cảnh

Cách tạo các nút cảnh báo theo ngữ cảnh

Bước 1) Thêm HTML:

Ví dụ

<div class="containerx">
    <button class="button" id="success">Success</button>
    <button class="button" id="info">Info</button>
    <button class="button" id="warning">Warning</button>
    <button class="button" id="danger">Danger</button>
    <button class="button" id="default">Default</button>
</div>

Bước 2) Thêm CSS:

Ví dụ

/* Tạo kiểu chung cho các button */
.containerx .button {
    padding:15px 25px;
    border:none;
    outline:none;
    margin-left:10px;
    font-size:14px;
    color:white;    
    cursor:pointer;
}
/* Thêm hiệu ứng khi hover */
.containerx .button:hover {
    opacity:0.8;    
}
/* Màu xanh */
.containerx #success {
    background-color:green;    
}
/* Màu xanh dương */
.containerx #info {
    background-color:dodgerblue;    
}
/* Màu cam */
.containerx #warning {
    background-color:orange;
}
/* Màu đỏ */
.containerx #danger {
    background-color:red;    
}
/* Màu xám */
.containerx #default {
    background-color:gray;    
}