# 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.

**URL:** https://convertto.tech/t/css-button-generator
**Category:** CSS Generators (https://convertto.tech/c/css-generators)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

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

## How to use

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

## FAQ

### 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.

## Related tools

- [CSS Hover Effect Generator](https://convertto.tech/t/css-hover-effects-generator): Generate a hover effect that animates cleanly, with the reduced-motion guard included.
- [CSS Border Radius Generator](https://convertto.tech/t/border-radius-generator): Drag eight handles to shape every corner: elliptical radii, inverted corners and squircles.
- [CSS Box Shadow Generator](https://convertto.tech/t/box-shadow-generator): Design a CSS box-shadow with live values for offset, blur, spread and colour.
- [CSS Scrollbar Styler](https://convertto.tech/t/css-scrollbar-generator): Style a scrollbar with both the standard properties and the WebKit pseudo-elements.
- [CSS Shape Generator](https://convertto.tech/t/css-shape-generator): Generate triangles, arrows, stars and other shapes using pure CSS.
- [CSS Tooltip Generator](https://convertto.tech/t/css-tooltip-generator): Generate a tooltip from a data attribute — no JavaScript, no extra markup.
- [Glassmorphism CSS Generator](https://convertto.tech/t/glassmorphism-generator): Create frosted-glass CSS with backdrop blur, transparency and a subtle border.
- [CSS Gradient Generator](https://convertto.tech/t/gradient-generator): Build linear, radial and conic CSS gradients and copy the code.
- [Z-Index & Stacking Context Checker](https://convertto.tech/t/z-index-visualizer): Paste your CSS and find the property that trapped the element in a stacking context.
- [CSS Specificity Calculator](https://convertto.tech/t/css-specificity-calculator): Work out a selector's specificity and see which parts contributed what.