CSS Button Generator

Design a CSS button — colours, padding, corners, border, type, shadow and hover — with hover, focus and disabled states, and the text contrast checked against WCAG.

Preview

Hover it, and press Tab to see the focus ring.

CSS
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background: #2563eb;
  color: #ffffff;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 2px 6px rgb(0 0 0 / 0.08);
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.button:hover {
  background: #2157cf;
}

.button:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

.button:active {
  transform: translateY(1px);
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}
  • ✓ Text on the button: 5.16:1 — passes (needs 4.5:1)
  • ✓ Text on hover: 6.30:1 — passes (needs 4.5:1)

Button

Letters, digits, - and _.
px
px
px
px
px
%
How is this calculated?
Contrast = (L1 + 0.05) ÷ (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colours (WCAG 2.2). Hover colour = each RGB channel × (1 − darkening ÷ 100).

Runs in your browser — nothing you enter leaves this device.

About this tool

What it does

CSS Button Generator designs a button and writes the CSS for it, with a live preview drawn by exactly that CSS. Start from a preset — solid, outline, pill or dark — then set the background, text and border colours, the padding, corner radius, border width, text size and weight, capital letters, a soft shadow, and how much darker it turns on hover. The CSS is a single class with the states a real button needs: :hover, :active (it presses down a pixel), :disabled, and :focus-visible with a clear outline, so keyboard users can see where they are — the state many generated buttons leave out. A reduced-motion rule turns off its small transitions for people who ask their device for less movement. Under the preview, the text contrast is checked for both the resting and the hover colours against WCAG 2.2: 4.5:1 for normal text, or 3:1 when the text is large (24 px, or about 19 px and bold).

How to use it
  1. Pick a preset close to what you want.
  2. Set the colours, size, corners and border; the preview updates as you go.
  3. Check the contrast lines under the preview — both should pass.
  4. Hover the preview and press Tab to see the hover and focus states.
  5. Give the class your own name and press Copy CSS.
Limits and your data
  • The contrast check is for the text on the button. A button sitting on a background of a similar colour may also need a border to be seen (WCAG 1.4.11 asks 3:1 for that).
  • Colours come out as hex. Gradients, icons and loading states are not generated.
  • The CSS sets font: inherit, so the button uses your page’s typeface; the preview uses this site’s.
  • Everything happens in your browser; nothing is sent.

Questions

Why does my button fail the contrast check?

The text and background are too close in lightness. White text needs a fairly dark background: #2563eb passes (5.16:1) while #3b82f6 does not (3.67:1). Darken the background, or use larger, bold text, which needs only 3:1.

Should I remove the focus outline?

No. Keyboard users rely on it to see which control is selected (WCAG 2.4.7). :focus-visible shows it only for keyboard focus, not on a mouse click, so it does not get in the way.

How do I use the CSS?

Paste it into your stylesheet and add the class to a <button> or a link: <button class="button">Sign up</button>. Use a real <button> for actions and <a> for links to other pages.

What does the hover darkening do?

It multiplies each colour channel by the amount you choose, so 12% darker keeps the same hue. Check that the hover state still passes the contrast line.