CSS Button Generator

Build a CSS button visually with live preview. Adjust padding, border radius, background, text color, font size, weight, border, shadow, and hover state. Copy the generated CSS into your stylesheet.

How to use the CSS Button Generator

Adjust the controls; the preview button and CSS output update live. Hover over the preview to see the hover state. The generated CSS is a complete class (.btn) plus a :hover rule ready to drop into your stylesheet.

Designing a button in CSS

A button is one of the most-styled elements on any site, and a good one pulls together several properties at once: padding for the click target, radius for the corners, background and text colors, a font weight that reads as actionable, a subtle shadow for lift, and a clear hover state. Tuning all of those by editing CSS and refreshing is slow; a live preview that includes the hover state is much faster.

Adjust the controls here and copy a complete .btn class plus its :hover rule. Two things to carry further: check that your text and background colors clear the legibility threshold in the contrast checker, and if you want richer depth, design the shadow in the dedicated box-shadow generator.

Common use cases

  • Primary actions — build a solid, high-contrast call-to-action button.
  • Secondary and outline — use a border with no fill for a quieter button.
  • Hover states — preview and copy the darker hover background.
  • Design system buttons — nail consistent padding and radius across variants.
  • Prototyping — grab a decent button class without writing it by hand.

Frequently asked questions

What does the generated CSS contain?
A full .btn class with your padding, radius, colors, font, border, and shadow, plus a matching :hover rule.

How do I make an outline button?
Set a border width and color and lower the background opacity or match it to the page, leaving the border as the visible edge.

Will my button text be readable?
Check the text and background pair in the contrast checker to confirm it meets WCAG.

Can I design a more detailed shadow?
Yes — build a multi-layer shadow in the box-shadow generator and paste it in.
Embed this tool on your site

Free to embed, no attribution required (but appreciated). Paste this where you want the tool to appear: