Hướng dẫn Trình tạo nút CSS
Nút là phần tử được nhấp nhiều nhất trên mọi trang — chúng mang theo mỗi lần đăng ký, mua hàng và tải xuống. Trình tạo cung cấp 6 kiểu (chuyển màu, viền ngoài, 3D, viên thuốc, phát sáng, lấp lánh), mỗi kiểu có trạng thái hover thật, kèm màu, bo góc và đệm tùy chỉnh.
Chọn kiểu, chỉnh màu và thanh trượt, rồi sao chép CSS sẵn dùng. Dán vào khối <style>, thêm class="btn" vào nút của bạn — hiệu ứng hover tự động đi kèm.
Pro Tips
- Giữ màu nút thống nhất với màu nhấn CTA và duy trì độ tương phản chữ ít nhất 4.5:1 (WCAG AA).
- Luôn thêm trạng thái hover dễ thấy — nâng nhẹ hoặc đổ bóng xác nhận nút có thể bấm và tăng chuyển đổi.
Frequently Asked Questions
Q: Cách thêm nút vào trang web của tôi?
Cách thêm nút vào trang web của tôi? Sao chép CSS đã tạo vào khối <style> và dùng <button class="btn">Nhãn</button> trong HTML.
Q: Vì sao nút gradient của tôi hiển thị màu đặc?
Vì sao nút gradient của tôi hiển thị màu đặc? Gradient cần cả màu đầu và màu cuối — kiểm tra cả hai bộ chọn màu đã được đặt và background không bị quy tắc khác ghi đè.
Q: Tôi có thể đổi hiệu ứng hover không?
Tôi có thể đổi hiệu ứng hover không? Có — khối .btn:hover là riêng biệt. Tự do sửa hoặc xóa các dòng transform, đổ bóng hoặc nền.
Q: Các nút này có thân thiện với người khuyết tật không?
Các nút này có thân thiện với người khuyết tật không? Có. Dùng độ tương phản dễ đọc và thêm :focus-visible { outline: 2px solid; outline-offset: 2px; } để người dùng bàn phím thấy tiêu điểm.
Q: Tôi có thể dùng trong dự án thương mại không?
Tôi có thể dùng trong dự án thương mại không? Hoàn toàn được — CSS tạo ra là nguyên bản và miễn phí cho cả việc cá nhân lẫn khách hàng.
Màu sắc Việt Nam
Từ màu son đỏ của đình chùa đến màu nâu đất của làng quê, màu sắc Việt Nam gắn liền với lịch sử, nông nghiệp lúa nước và trang phục truyền thống áo dài.
Đỏ son #E32636Màu son của cổng làng, đình chùa và câu đối
Vàng hoàng thái #FFD700Màu vàng của hoàng cung và lễ hội
Xanh lam #0056A7Màu xanh của biển Đông
Màu gạch #B22222Màu gạch nung của làng quê Bắc Bộ
Vàng nắng #F7C948Ánh nắng vàng trên cánh đồng lúa chín
Xanh ngọc #00A86BMàu ngọc bích của vịnh Hạ Long
Tím Huế #7F5FA3Màu tím của áo dài và hoa phượng tím xứ Huế
Nâu đất #8B5A2BMàu đất phù sa của đồng bằng sông Hồng
Hồng sen #F5A9B8Màu hoa sen — quốc hoa của Việt Nam
Trắng ngà #FFFFF0Màu áo dài trắng của nữ sinh
Q: Màu đỏ son là gì?
Màu đỏ son là gì? Màu đỏ son (#E32636) là màu đỏ truyền thống được dùng để sơn cổng làng, đình chùa và câu đối Tết ở Việt Nam, tượng trưng cho may mắn và thịnh vượng.
Q: Màu tím Huế là gì?
Màu tím Huế là gì? Tím Huế (#7F5FA3) là màu tím đặc trưng của xứ Huế, gắn liền với áo dài tím, hoa phượng tím và nét lãng mạn của cố đô.