Trang chủ
CSS
Nút CSS
Tryit: Nhóm nút có viền
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> .btn-group .button { màu nền: #04AA6D; /* Màu xanh lá cây */ đường viền: 1px màu xanh lá cây; màu trắng; phần đệm: 15px 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; con trỏ: con trỏ; nổi: trái; } .btn-group .button:not(:last-child) { border-right: none; /* Ngăn chặn đường viền kép */ } .btn-group .button:hover { Background-color: #3e8e41; } </style> </head> <body> <h2>Nhóm nút có viền</h2> <p>Thêm đường viền để tạo nhóm nút có viền:</p> <div class="btn-group"> <button class="button">Nút</button> <button class="button">Nút</button> <button class="button">Nút</button> <button class="button">Nút</button> </div> <p style="clear:both"><br>Hãy nhớ xóa các phần nổi sau, nếu không phần tử p này cũng sẽ nổi bên cạnh các nút.</p> </body> </html>