Skip to content
Convertto

CSS Button Generator With Hover and Focus States

Design a button and copy the CSS, including the hover, active and focus-visible states.

A button is not finished when it looks right at rest. It needs a hover state, a pressed state, a focus ring that appears for keyboard users but not for mouse clicks, and a disabled state — and the generated CSS includes all of them. Padding is set separately across and down because a button's proportions carry more of its character than its radius does. The focus ring uses :focus-visible rather than :focus, so clicking does not leave an outline behind while tabbing still shows one.

Runs in your browser
Privacy
Runs entirely in your browser — nothing is uploaded
Cost
Free, unlimited, no sign-up

Frequently asked questions

Why :focus-visible instead of :focus?

A plain :focus ring appears when you click with a mouse, which most designers then remove — taking the keyboard ring with it. :focus-visible only fires when the browser judges a ring is genuinely useful, which is keyboard and assistive-tech navigation. It gives you the clean click behaviour without breaking keyboard access.

Do I need a disabled style?

Yes. A disabled button that looks identical to an active one is an invitation to click something that will not respond. Reduced opacity plus not-allowed is the conventional pair, and it costs two lines.

Is a transition on transform expensive?

No. Transform and opacity are composited, so the browser animates them without laying out or painting again. The one-pixel press effect here is essentially free.

How to use the css button generator

  1. 1Choose the style.
  2. 2Pick the accent.
  3. 3Pick the label colour.
  4. 4Set the corner radius.
  5. 5Set the padding — across.
  6. 6Set the padding — down.
  7. 7Set the font size.
  8. 8Choose the weight.
  9. 9The result appears immediately — copy or download it.

Embed this tool

Put the working css button generator on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

Share this tool

Related tools

CSS Hover Effect GeneratorGenerate a hover effect that animates cleanly, with the reduced-motion guard included.CSS Border Radius GeneratorDrag eight handles to shape every corner: elliptical radii, inverted corners and squircles.CSS Box Shadow GeneratorDesign a CSS box-shadow with live values for offset, blur, spread and colour.CSS Scrollbar StylerStyle a scrollbar with both the standard properties and the WebKit pseudo-elements.CSS Shape GeneratorGenerate triangles, arrows, stars and other shapes using pure CSS.CSS Tooltip GeneratorGenerate a tooltip from a data attribute — no JavaScript, no extra markup.

Last updated

More css generators