CSS Button Generator

Design accessible CSS buttons with hover and focus states, then copy the HTML and CSS.

Runs in your browser. Your input is processed on your device and is not uploaded to our server.

Label

Background

Text colour

Hover background

Border colour

Border width

Radius

Padding Y

Padding X

Font size

Weight

Shadow

CSS

HTML

How to use the CSS Button Generator

Choose colours, padding, radius, border and font.
Preview the hover and focus states.
Copy the CSS and HTML.

The generated CSS includes a visible :focus-visible outline for keyboard users and warns when the label colour does not meet WCAG contrast against the button background.

Frequently asked questions

Should I remove the focus outline?

No. Keyboard users need it to know where they are. Style it instead of removing it.