CSS Button Generator

Design CSS buttons with colours, hover state, padding, radius, border and shadow — live preview and code.

How do I make a nice button with CSS?

Pick a style (solid, outline or gradient), colours, padding, radius and shadow; the live preview updates and the generator writes the CSS, including :hover, :active and an accessible :focus-visible outline.

Accessibility tips

Keep text contrast at least 4.5:1 — test it with the Contrast Checker.
Make touch targets at least 44 × 44 px (padding 12px 24px at 16px text is close).
Never remove the focus outline without providing another visible focus style.

Frequently asked questions

Should I use button or a link?

Use <button> for actions and <a> for navigation; the CSS works on both.

Can I use it with Tailwind?

Copy the values into a custom class or your Tailwind config.

Is the CSS free to use?

Yes, in any project.