CSS Button Generator

A good button needs more than a background color: a hover state, a pressed state, a visible keyboard focus ring, readable text and a smooth transition. This generator writes all of it from a few settings — padding, font, colors, border, radius and shadow — and computes the hover and pressed colors by darkening the background in OKLCH, which keeps the hue steady. It checks the text contrast against WCAG and renders the normal, hover, active and focus states side by side in your own browser.

How to use this tool

1. Type the button text and set padding, font size and weight.
2. Choose the background, text and border colors and the corner radius.
3. Keep the automatic hover color or pick your own, and set the focus ring and transition.
4. Copy the CSS and HTML; check the contrast line before you ship.

Formula

hover = OKLCH(L − 0.08, C, H) · active = OKLCH(L − 0.12, C, H) · contrast = (L₁ + 0.05) ÷ (L₂ + 0.05)

OKLCH lightness runs from 0 to 1, so 0.08 is 8 points. If the darker color falls outside sRGB, its chroma is reduced with the CSS Color 4 gamut-mapping method. The contrast uses WCAG relative luminance and is truncated, not rounded.

Example

The default blue #2563EB has OKLCH lightness 0.546; 8 points darker gives the hover color #0B48CF and 12 points the pressed color #003BC1. White text on #2563EB reaches 5.16:1, which passes WCAG AA for normal text (4.5:1) but not AAA (7:1).