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.

Text Padding Y Padding X Font size Font weight Radius BG Text Border width Border Shadow Y Shadow blur Shadow alpha Hover BG

CSS

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.

CSS Button Generator

How to use the CSS Button Generator

Related tools