Đăng nhập
Bạn chưa có tài khoản? Đăng ký.
Bạn đã quên password?
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
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; }