CSS Button Generator

Design a button and copy the CSS, with a live hover preview.

Padding: 11px 22pxRadius: 8pxFont Size: 15pxBorder: 0pxCSS Length: 260 chars

Presets

Background

Text

Hover background

Border color

Padding X (22px)

Padding Y (11px)

Radius (8px)

Font size (15px)

Border width (0px)

Button label

Live preview (hover it)

CSS Code

.button {
  background: #6366f1;
  color: #ffffff;
  padding: 11px 22px;
  border: 0px solid #000000;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button:hover {
  background: #4f46e5;
}

Styling buttons with CSS

A good button is mostly padding, a clear background color, a readable text color, and a subtle :hover state. This generator wires those into a single rule plus a hover rule, with a transition so the color change feels smooth. Adjust the controls, hover the preview, and copy the CSS — all in your browser.

More CSS tools: the gradient generator, the box-shadow generator, and the border-radius generator.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Producing a button style with hover and focus states in one pass.
Getting padding and radius values that match a design.
Building a button without a component library.
Comparing two colour treatments against a live preview.
Producing a starting style you then tokenise.

Frequently Asked Questions

What states does a button actually need?: Five: default, hover, focus-visible, active and disabled. Hover alone is the common shortfall — it does nothing for keyboard or touch users, and a button with no visible focus ring is unusable without a mouse regardless of how it looks.
Why focus-visible rather than focus?: Because `:focus` shows a ring after a mouse click too, which is what led people to remove outlines entirely and break keyboard access. `:focus-visible` applies only when the browser judges a focus indicator is warranted — keyboard and programmatic focus, not a pointer.
How large should a button be?: At least 44×44 CSS pixels for touch, which is the WCAG 2.5.8 target size and Apple's long-standing guidance. Padding counts toward it, so a visually small button can still meet the target if its hit area extends — which is invisible in a design mock and testable in a browser.
Should it be a button or a link?: A `<button>` performs an action, an `<a>` navigates. The distinction matters because they behave differently for keyboards and screen readers: Space activates a button, Enter follows a link, and a link is announced with its destination. Styling one to look like the other is fine; swapping the element is not.
How do I show a disabled state accessibly?: The `disabled` attribute removes the element from the tab order entirely, so a user tabbing through never learns it exists. `aria-disabled="true"` with the styling and the click handler suppressed keeps it focusable and discoverable, which is usually the better trade.

Common errors and gotchas

Styling only the hover state, leaving focus invisible for keyboard users.
Using a div rather than a button, which loses every built-in behaviour and role.
Choosing a label colour that fails contrast against the background.
Making the target smaller than the recommended minimum for touch.
Removing the default focus ring without providing a replacement.