Trang chủ
CSS
Nút CSS
Dùng thử: Thay đổi kiểu khi di chuột
Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <head> <style> .button { màu nền: #04AA6D; /* Xanh */ đường viền: không có; màu trắng; phần đệm: 16px 32px; căn chỉnh văn bản: giữa; trang trí văn bản: không có; hiển thị: khối nội tuyến; cỡ chữ: 16px; lề: 4px 2px; thời gian chuyển tiếp: 0,4 giây; con trỏ: con trỏ; } .button1 { màu nền: trắng; màu đen; đường viền: 2px liền khối #04AA6D; } .button1:hover { màu nền: #04AA6D; màu trắng; } .button2 { màu nền: trắng; màu đen; đường viền: 2px liền khối #008CBA; } .button2:hover { màu nền: #008CBA; màu trắng; } .button3 { màu nền: trắng; màu đen; đường viền: 2px liền khối #f44336; } .button3:hover { màu nền: #f44336; màu trắng; } .button4 { màu nền: trắng; màu đen; đường viền: 2px liền khối #e7e7e7; } .button4:hover {màu nền: #e7e7e7;} .button5 { màu nền: trắng; màu đen; đường viền: 2px liền khối #555555; } .button5:hover { màu nền: #555555; màu trắng; } </style> </head> <body> <h2>Các nút có thể di chuột</h2> <p>Sử dụng bộ chọn :hover để thay đổi kiểu của nút khi bạn di chuột qua nó.</p> <p ><strong>Mẹo:</strong> Sử dụng thuộc tính thời lượng chuyển tiếp để xác định tốc độ của hiệu ứng "di chuột":</p> <button class="button Button1">Xanh lục</button> <button class=" nút nút2">Xanh lam</button> <button class="button nút3">Đỏ</button> <button class="button Button4">Xám</button> <button class="button Button5">Đen</button > </body> </html>