Cách dùng Mẫu nút CSS
- Rê chuột qua các nút và nhấp vào kiểu bạn thích.
- Đặt màu sắc, kích thước, độ bo góc và tốc độ, cùng các trạng thái khi rê chuột, khi nhấn và khi đã nhấp. Mọi kiểu đều cập nhật ngay lập tức.
- Sao chép CSS và HTML, hoặc dùng Sao chép tất cả để lấy một khối duy nhất.
- Với Webflow, nhấn Sao chép sang Webflow rồi dán vào Designer bằng Ctrl/⌘+V.
Hiệu ứng hover nhẹ nhàng
Mọi kiểu nút ở đây đều chỉ dùng CSS thuần, ngoại trừ một kiểu quét đường thẳng có thêm một SVG nội tuyến nhỏ. Không cần thư viện và không dùng JavaScript. Màu sắc là custom properties ở đầu quy tắc, nên khi muốn đổi giao diện nút về sau, bạn chỉ cần thay đổi hai hoặc ba giá trị.
- Người dùng bàn phím sẽ thấy viền
:focus-visiblerõ ràng ở mọi kiểu nút. - Chế độ giảm chuyển động được tôn trọng: phần chuyển động sẽ tắt với những người dùng yêu cầu ít hoạt ảnh hơn.
- Liên kết hay nút: dùng
<a>để chuyển đến một trang và<button>để thực hiện một hành động. CSS hoạt động tốt với cả hai.
Trạng thái khi rê chuột, khi nhấn và khi đã nhấp
Mỗi nút đi kèm màu chữ :hover và màu cùng kích thước :active khi được nhấn. Bật Trạng thái đã nhấp để thêm kiểu .is-clicked kèm một đoạn script ngắn, phù hợp với các nút thích, lưu hoặc theo dõi. Chọn rem để đặt kích thước nút theo font size gốc, với giả định trình duyệt mặc định 16px. Các đường viền mỏng 1px và 2px vẫn giữ đơn vị pixel để hiển thị sắc nét.
Dùng kiểu nút trong Webflow
Sao chép sang Webflow sẽ dán một phần tử Embed chứa cả CSS lẫn nút. Webflow chưa thể tạo hoạt ảnh pseudo-element trong bảng Style, nên Embed giúp hiệu ứng giữ đúng như thiết kế. Nếu muốn tự tạo kiểu cho các nút của riêng mình, hãy đặt CSS vào mã tùy chỉnh của trang và gán class cho các nút đó.
Muốn tự tạo nút từ đầu? Hãy dùng CSS Button Generator. Kiểm tra độ rõ của chữ bằng Contrast Checker, và xem Hamburger Menu Icons để có các nút menu có hoạt ảnh.
Cũng được tìm dưới tên: hiệu ứng hover nút css, nút css đẹp, nút css có hiệu ứng động, animation nút hover, css button hover, copy nút css, webflow button hover.
Các công cụ dùng kèm tốt với Mẫu nút CSS
- Tạo hiệu ứng hover CSS — Thiết kế animation hover cho nút, thẻ, liên kết và icon.
- Tạo CSS Gradient — Thiết kế gradient trực quan: kéo các điểm màu, đổi góc hoặc kiểu, chọn sẵn một mẫu có sẵn rồi sao chép CSS dùng được ngay, kèm màu nền đặc làm phương án dự phòng.
- Tạo Box Shadow CSS — Xếp nhiều lớp bóng đổ, chỉnh độ lệch, blur, spread và độ trong suốt trên thẻ xem trước trực tiếp, rồi sao chép CSS box-shadow hoặc text-shadow.
- Trình tạo animation CSS — Thiết kế animation CSS trên timeline keyframe thực tế.