CSS button generator: thiết kế nút bấm đủ trạng thái và đủ tương phản
Một nút bấm tốt không chỉ đẹp ở trạng thái đứng yên mà còn phải phản hồi khi rê chuột, khi nhấn, hiện rõ viền khi dùng bàn phím và trông khác đi khi bị vô hiệu. Công cụ CSS button generator này cho bạn chỉnh trực quan khoảng đệm, phông chữ, bo góc, màu, gradient, viền, bóng đổ và cả bốn trạng thái, đo tỷ lệ tương phản WCAG ngay khi đổi màu, rồi xuất CSS với tên class do bạn đặt.
Tính năng nổi bật
- 10 mẫu có sẵn: chính, viền, ghost, nguy hiểm, thành công, gradient bo tròn, mềm, brutalist, tối, CTA lớn; ba cỡ nhanh Nhỏ, Vừa, Lớn
- Chỉnh đệm dọc, đệm ngang, cỡ chữ, độ đậm, giãn chữ, viết hoa, phông chữ, bo góc từ 0 đến dạng viên thuốc
- Nền màu đặc, gradient hai màu có góc tùy chỉnh hoặc trong suốt; viền và bóng đổ tùy chỉnh độ lệch, độ nhòe, độ đậm
- Trạng thái hover (màu nền, màu chữ, màu viền, nhấc lên), active (thu nhỏ khi nhấn), focus-visible (màu, độ dày, khoảng cách viền) và disabled
- Đo tỷ lệ tương phản WCAG giữa chữ và nền ở trạng thái thường lẫn khi rê chuột, tự áp ngưỡng 4,5:1 hoặc 3:1 cho chữ lớn, đo cả viền focus so với nền trang
- Xem thử nút dùng được thật và bốn ô ép sẵn trạng thái hover, active, focus, disabled để so sánh cùng lúc
- Đặt tên class tùy ý, công cụ kiểm tra tên hợp lệ; mã có sẵn :focus-visible, :disabled, aria-disabled và khối prefers-reduced-motion
- Sao chép HTML (nút thường, nút vô hiệu, liên kết dạng nút) và CSS bằng hai nút riêng
Vì sao nên dựng nút bằng công cụ có kiểm tra tương phản
Lỗi phổ biến nhất ở nút bấm không nằm ở màu sắc hay bo góc mà ở những trạng thái ít ai để ý. Nhiều trang xóa viền focus bằng outline: none cho đẹp, khiến người dùng bàn phím không biết mình đang đứng ở đâu. Nhiều nút màu xanh lá hay cam nhạt với chữ trắng trông rất ổn trên màn hình thiết kế nhưng khó đọc ngoài nắng. Công cụ này bắt bạn nhìn cả năm trạng thái cùng lúc và tính tỷ lệ tương phản theo đúng công thức WCAG 2.x ngay khi đổi màu, nên các lỗi đó lộ ra trước khi nút được đưa lên trang thật.
Lợi ích khi sử dụng
- Thấy cả năm trạng thái của nút cùng lúc
- Biết ngay màu chữ và nền có đủ tương phản hay không
- Không bao giờ quên viền focus cho người dùng bàn phím
- CSS gọn, đặt tên class theo quy ước của dự án
- Có sẵn mã cho liên kết dạng nút và nút vô hiệu
- Chạy hoàn toàn trên trình duyệt, không cần đăng nhập
Cách tạo nút CSS
- 1Chọn mẫu: Bấm một mẫu gần giống ý muốn, ví dụ Chính cho nút hành động chính hoặc Viền cho nút phụ, rồi chọn cỡ Nhỏ, Vừa, Lớn ở thẻ Kích thước, chữ.
- 2Chỉnh chữ và hình dạng: Kéo đệm, cỡ chữ, độ đậm, bo góc, chọn phông chữ, nhập chữ trên nút và đặt tên class.
- 3Chỉnh màu: Ở thẻ Màu, viền, bóng, chọn kiểu nền, màu chữ, viền và bóng đổ. Nhập màu nền trang thật của bạn để phép đo tương phản sát thực tế.
- 4Chỉnh trạng thái: Ở thẻ Trạng thái, đặt màu khi rê chuột, độ nhấc, độ thu khi nhấn, màu và độ dày viền focus, độ mờ khi vô hiệu.
- 5Kiểm tra tương phản: Xem bảng Độ tương phản, mọi dòng báo chưa đạt nên được sửa bằng cách làm đậm nền hoặc đổi màu chữ.
- 6Sao chép mã: Bấm Sao chép HTML và Sao chép CSS, dán vào dự án.
Năm trạng thái của một nút bấm
Trạng thái thường là lúc nút đứng yên. Hover là khi con trỏ chuột nằm trên nút, thường làm nền đậm hơn hoặc nhấc nút lên vài pixel để báo nút bấm được. Active là khoảnh khắc đang nhấn, thường thu nhỏ nhẹ để giống cảm giác ấn một phím thật. Focus-visible là khi nút nhận focus bằng bàn phím, cần một viền rõ ràng. Disabled là khi nút tạm thời không dùng được, thường mờ đi và đổi con trỏ. Mã của công cụ gắn :not(:disabled, [aria-disabled="true"]) vào hover và active để nút đã vô hiệu không còn phản hồi khi rê chuột, tránh làm người dùng tưởng nhầm là bấm được.
Tỷ lệ tương phản WCAG được tính thế nào
WCAG 2.x tính độ chói tương đối của từng màu theo công thức chuẩn sRGB, rồi lấy (độ chói sáng hơn + 0,05) chia (độ chói tối hơn + 0,05). Kết quả chạy từ 1:1 (hai màu giống nhau) tới 21:1 (đen trên trắng). Chữ thường cần tối thiểu 4,5:1 theo mức AA. Chữ lớn, tức từ 24px, hoặc từ khoảng 18,66px khi đậm từ 700 trở lên, chỉ cần 3:1. Ví dụ tính bằng công cụ: chữ trắng trên nền xanh #2563eb đạt khoảng 5,17:1, đạt yêu cầu; chữ xám #777777 trên nền trắng chỉ đạt khoảng 4,48:1, thiếu một chút so với 4,5:1. Công cụ tự đổi ngưỡng khi bạn tăng cỡ chữ hoặc độ đậm.
Viền focus: đừng xóa, hãy thiết kế lại
Người dùng bàn phím, người dùng công tắc hỗ trợ và cả người đang điền form nhanh bằng phím Tab đều dựa vào viền focus để biết mình đang ở đâu. Mã của công cụ dùng :focus-visible thay cho :focus, nên viền chỉ hiện khi trình duyệt đánh giá người dùng đang điều hướng bằng bàn phím, không hiện khi bấm bằng chuột, vừa đẹp vừa không mất khả năng truy cập. Viền dùng outline kèm outline-offset để tách khỏi mép nút một khoảng, giúp nhìn rõ ngay cả khi màu viền gần màu nút. Vì viền nằm trên nền trang, công cụ đo tương phản của viền với màu nền trang và nhắc khi thấp hơn 3:1.
Nút gradient và vì sao hover dùng filter: brightness
Trình duyệt không chuyển mượt giữa hai giá trị background-image khác nhau, nên nếu đổi gradient khi rê chuột, nút sẽ đổi màu đột ngột dù đã khai báo transition. Công cụ xử lý nút gradient bằng filter: brightness(), làm cả nút sáng hoặc tối đi theo tỷ lệ phần trăm, thuộc tính này chuyển tiếp mượt. Lưu ý filter cũng tác động lên chữ và bóng của nút. Vì vậy khi nút gradient có hover, phần tương phản khi rê chuột được ghi là ước tính: công cụ nhân từng kênh màu với hệ số độ sáng để đo gần đúng. Mã cũng khai báo background-color bằng màu đầu tiên của gradient làm dự phòng.
Dùng thẻ button hay thẻ a
Nguyên tắc đơn giản: đưa người dùng tới một trang khác thì dùng thẻ a có href, thực hiện một hành động trên trang như gửi form, mở hộp thoại thì dùng thẻ button. Hai thẻ này có hành vi bàn phím khác nhau, liên kết kích hoạt bằng Enter còn nút kích hoạt bằng cả Enter và Space, và trình đọc màn hình gọi tên chúng khác nhau. Mã HTML công cụ xuất ra có cả hai dạng dùng chung một class. Thẻ button luôn có type="button" để không vô tình gửi form. Với liên kết không bấm được, dùng aria-disabled="true" thay cho thuộc tính disabled vì thẻ a không hỗ trợ disabled; CSS đã có sẵn kiểu cho trường hợp này, nhưng bạn vẫn cần chặn hành vi bấm bằng JavaScript.
Kích thước vùng bấm trên điện thoại
Nút quá nhỏ dễ bấm nhầm trên màn hình cảm ứng. WCAG 2.2 ở mức AA yêu cầu vùng bấm tối thiểu 24 x 24 pixel CSS (hoặc có đủ khoảng trống xung quanh), còn các hướng dẫn thiết kế di động phổ biến khuyên dùng khoảng 44 đến 48 pixel cho nút chính. Chiều cao nút trong công cụ bằng cỡ chữ nhân 1,2 cộng hai lần đệm dọc cộng viền. Ví dụ cỡ Vừa với chữ 16px và đệm dọc 12px cho nút cao khoảng 43px, cỡ Nhỏ với chữ 14px và đệm 8px cho nút cao khoảng 33px, vẫn trên mức tối thiểu 24px nhưng nên dùng cho thao tác phụ.
Giới hạn cần biết
Công cụ đo tương phản với màu đặc, gradient được đo ở hai màu đầu cuối chứ không đo từng điểm ở giữa, và nền trong suốt được đo với màu nền trang bạn nhập. Chữ nằm trên ảnh nền không đo được. Phần ước tính khi hover nút gradient là gần đúng vì filter của trình duyệt có thể xử lý màu hơi khác. Công cụ không tạo biểu tượng trong nút, không tạo hiệu ứng phức tạp như gợn sóng khi nhấn, và không sinh lớp tiện ích Tailwind. Nút vô hiệu được WCAG miễn yêu cầu tương phản nên không có trong bảng đo, nhưng vẫn nên đủ rõ để người dùng đọc được nội dung.
Câu hỏi thường gặp (FAQ)
CSS button generator là gì?
Là công cụ tạo mã CSS cho nút bấm bằng cách chỉnh trực quan thay vì gõ tay từng thuộc tính. Bạn thấy nút thay đổi ngay khi kéo thanh trượt hoặc đổi màu, rồi sao chép mã hoàn chỉnh.
Tên class hợp lệ phải như thế nào?
Công cụ chấp nhận tên gồm chữ cái không dấu, số, gạch ngang và gạch dưới, không bắt đầu bằng số và không bắt đầu bằng hai dấu gạch ngang, ví dụ btn, btn-primary, cta_main. Không nhập dấu chấm ở đầu, công cụ tự thêm trong CSS.
Tỷ lệ tương phản bao nhiêu là đủ?
Theo WCAG 2.x mức AA, chữ thường cần tối thiểu 4,5:1, chữ lớn (từ 24px hoặc khoảng 18,66px đậm) cần 3:1. Viền focus và các thành phần giao diện phi văn bản cần 3:1 so với màu xung quanh.
Vì sao chữ trắng trên nền xanh lá hoặc cam thường không đạt?
Xanh lá và cam tươi có độ chói tương đối cao, nên chữ trắng trên đó không đủ tách biệt. Cách sửa là chọn sắc độ đậm hơn của cùng màu, ví dụ xanh lá #15803d đạt khoảng 5,02:1 với chữ trắng, hoặc đổi chữ sang màu tối.
Vì sao dùng :focus-visible thay cho :focus?
:focus-visible chỉ hiện viền khi trình duyệt đánh giá người dùng đang dùng bàn phím, còn khi bấm bằng chuột thì không. Nhờ vậy không cần xóa viền focus cho đẹp mà vẫn giữ được khả năng truy cập. Chrome, Edge, Firefox và Safari bản hiện hành đều hỗ trợ.
Nút gradient đổi màu khi rê chuột có mượt không?
Có, vì công cụ dùng filter: brightness() cho hover thay vì đổi gradient. Nếu bạn tự đổi background-image khi hover, trình duyệt sẽ đổi đột ngột vì không nội suy được giữa hai ảnh nền.
Làm nút vô hiệu thế nào cho đúng?
Với thẻ button, thêm thuộc tính disabled. Với thẻ a hoặc khi muốn nút vẫn nhận focus để đọc được lý do, dùng aria-disabled="true" và chặn hành động bằng JavaScript. CSS của công cụ đã tạo kiểu cho cả hai trường hợp.
Hiệu ứng nhấc lên khi hover có ảnh hưởng người dùng nhạy cảm chuyển động không?
Chuyển động nhỏ vài pixel thường không gây khó chịu, nhưng mã vẫn có khối prefers-reduced-motion tắt transition và bỏ phần di chuyển cho người dùng đã bật giảm chuyển động.
Có dùng được mã này trong React, Vue không?
Được. Dán CSS vào file CSS hoặc CSS module, đổi class thành className trong JSX. Nếu dùng CSS module, tên class sẽ được băm nên bạn gọi qua styles.btn.
Có tạo mã Tailwind không?
Không, công cụ chỉ xuất CSS thuần. Bạn có thể đưa khối CSS vào @layer components trong file CSS của dự án Tailwind để dùng như một class thành phần.
Vì sao nên nhập màu nền trang?
Nút viền hoặc nút ghost có nền trong suốt nên chữ nằm trực tiếp trên nền trang, và viền focus luôn nằm trên nền trang. Nhập đúng màu nền giúp phép đo tương phản khớp với thực tế.
Nút nên cao bao nhiêu?
WCAG 2.2 mức AA yêu cầu vùng bấm tối thiểu 24 x 24 pixel CSS hoặc đủ khoảng cách với các vùng bấm khác. Với nút hành động chính trên điện thoại, chiều cao khoảng 44 đến 48 pixel dễ bấm hơn.
Công cụ có lưu thiết kế của tôi không?
Không. Mọi thứ chỉ nằm trong trang đang mở, tải lại trang sẽ về mặc định. Hãy sao chép mã khi đã ưng ý.
Từ khóa liên quan
- css button
- css button generator
- tạo nút css
- button css đẹp
- css button hover
- nút bấm css
- button focus visible
- gradient button css
- outline button css
- wcag contrast button
- kiểm tra tương phản màu
- nút disabled css
- css button animation
- thiết kế nút bấm website
- button generator online
- pill button css
- neubrutalism button css
- css cta button
- aria-disabled
