CSS button generator with hover, focus and disabled states

How to use the CSS button generator

1. Type the Label and choose the Background and Text colour.
2. Adjust Horizontal padding, Vertical padding, Corner radius, Font size and Font weight.
3. Add a Border width above 0 to get a Border colour field.
4. Pick a Hover effect: Darken, Lighten, Lift with shadow or None. Untick Resting shadow for a flat button.
5. Check the preview, which shows a normal and a disabled copy, and read any contrast warning. Copy the CSS and the HTML.

What it does and when to use it

Most hand-written buttons cover the normal look and a hover colour, then forget the rest. This generator writes all five states people meet: resting, :hover, :active (the button snaps back down when pressed), :focus-visible for keyboard users, and :disabled at half opacity with a “not allowed” cursor. Use it for call-to-action buttons, form submit buttons, or as a starting point for a design system.

If you want only the corner shape, use the border radius generator. For a softer custom shadow, build one in the box shadow generator, and to explore label colours that pass, try the contrast checker.

How it works

The base rule sets display: inline-flex with centred content, your padding, a font shorthand such as 600 16px/1.2 system-ui, sans-serif, the colours, border and radius. A 150 ms transition covers background colour, transform and shadow so every hover effect animates. The focus ring is a 3px outline 2px away from the button, coloured with your background made 15 points lighter in OKLCH. If that colour would have less than 3:1 contrast against a white page, the tool darkens the background colour instead until it reaches 3:1. MDN lists :focus-visible as Baseline widely available since March 2022.

Worked examples

A red delete button. Background #dc2626, white text, Darken, no resting shadow, radius 6px. The hover rule becomes background: #bf0002; and the focus ring outline: 3px solid #ff6c60;.

A contrast problem. Background #facc15 with white text returns the warning “Text contrast is only 1.53:1 — WCAG AA needs 4.5:1 for button labels.” Dark text such as #1f2937 fixes it.

The markup. With the defaults, the HTML output is <button class="btn" type="button">Get started</button>. The type="button" stops it from submitting a form by accident; change it to submit inside a form.

Limits and tips

• The focus ring assumes a white page. On pale buttons the ring is darkened to reach 3:1 against white; on a dark page, check the ring against your real background.
• The contrast check uses 4.5:1 for every size. Large bold labels can pass WCAG AA at 3:1, so the warning is on the strict side.