Đăng nhập
Bạn chưa có tài khoản? Đăng ký.
Bạn đã quên password?
Trong bài thực hành này, chúng ta sẽ tạo nút button Next/ Preview bằng HTML và CSS
Bước 1) Thêm HTML:
Ví dụ
<div class="container1"> <button class="button">« Preview</button> <button class="button">Next »</button> </div>
Bước 2) Thêm CSS:
Ví dụ
.container1, .container2, .container3 { margin-top:10px; } /* Tạo kiểu cho các nút button */ .button { border:none; outline:none; text-align:center; font-size:28px; color:white; cursor:pointer; margin:5px; } .container1 .button { padding:10px 15px; background-color:#428bca; } /* Thêm hiệu ứng chuyển background khi hover */ .container1 .button:hover { background-color:red; } .container2 .button { padding:10px 20px; background-color:black; } .container2 .button:hover { background-color:royalblue; } .container3 .button { padding:10px 20px; background-color:gray; border-radius:50%; } .container3 .button:hover { background-color:orange; }