Super Boring Tools

Search tools

Find a tool by name or what it does.

CSS Button Generator

Style a button with live controls and copy the base, hover, and focus CSS.

Preview

Hover the button to see the derived hover state. Tab to it to see the focus ring.

Preset
Refine
CSS
.button {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: all 150ms ease;
  background: #6366f1;
  color: #ffffff;
  border: none;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.16);
}

.button:hover {
  background: #797bf3;
}

.button:focus-visible {
  outline: 3px solid #8a8cf5;
  outline-offset: 2px;
}

How to make a CSS button

  1. Pick a preset

    Start from solid, outline, gradient, or 3D. The preview button restyles instantly and the controls below adjust that starting point.

  2. Tune the look

    Set padding, corner radius, colors, border, shadow, and font weight with the sliders and pickers. Every change redraws the preview live.

  3. Check the hover and focus

    Hover the preview to see the derived hover state, and tab to it to see the accessible focus ring. Both are written into the CSS.

  4. Copy the CSS

    The base, :hover, and :focus-visible rules sit below the controls and update as you go. Click Copy CSS to grab all three.

Why use this tool

Four starting presets

Solid, outline, gradient, and 3D presets give you a sensible base in one click, so you refine a real button instead of styling from a blank slate.

Live preview with real states

The preview button reacts to hover and keyboard focus exactly as the copied CSS will, so you judge every state by eye before you paste.

Derived hover automatically

The hover color is computed from your base color, darkening solid and 3D fills and inverting outline buttons, so hover always reads as a change.

Accessible focus ring included

A visible :focus-visible ring with offset is generated alongside the button, keeping keyboard users able to see where they are.

Complete, paste-ready rules

Output is three full CSS rules for the base, hover, and focus states, ending in semicolons, ready to drop into any stylesheet.

Runs entirely in your browser

The button is styled and the CSS is generated locally, with no account and nothing sent to a server.

About this tool

This CSS button generator turns a set of controls into three ready-to-paste rules: the base button, its :hover state, and an accessible :focus-visible ring. Pick one of four presets to start, solid, outline, gradient, or 3D, then adjust padding, corner radius, font size and weight, border, and shadow. Each change redraws the live preview and rewrites the code in the same instant, so the CSS you copy is exactly the button you were looking at.

Hover states are where hand-written button CSS usually falls short. Here the hover color is derived from your base color automatically: solid and 3D fills darken, outline buttons fill in with their accent, and gradients deepen. That means the hover always reads as a deliberate change instead of a guess. A visible focus ring is generated too, with an offset so it never hides behind the button edge, which keeps keyboard and switch users oriented.

Everything runs in your browser with nothing to sign up for and nothing uploaded. When you have the shape you want, pair it with the CSS gradient generator for richer fills, the CSS transition generator to fine-tune the hover timing, or the color converter when your brand color starts out as an HSL or RGB value.

Frequently asked questions

What CSS does this generate?
Three rules: the base button styling, a :hover rule with a derived color, and a :focus-visible rule with an accessible outline. Copy CSS grabs all three so the button, its hover, and its focus ring drop into your stylesheet together.
How is the hover color chosen?
It is derived from your base color. Solid and 3D buttons darken their fill, outline buttons fill in with their accent color, and gradient buttons deepen. You always get a hover that clearly differs from the resting state.
Why include a focus ring?
A visible focus ring lets people navigating by keyboard see which button is active. The generated :focus-visible rule uses an outline with an offset so it stays clear of the button edge and does not disturb mouse users.
How do I use the generated CSS?
Copy the CSS and paste it into your stylesheet, then apply the class to your button element. The rules are complete declarations, so they work as-is without extra wrapping.
Is anything uploaded to a server?
No. The preview is rendered and the CSS is generated locally in your browser. Nothing is sent anywhere, stored, or logged.

Related tools