Built-in toolFree · No signup

CSS Button Generator

Design production-ready CSS buttons visually. Configure text, colours, padding, radius, border, shadow, and hover effects — then hover over the live preview to test the interaction before copying.

Share on X LinkedIn

Click me

Hover to preview interaction

Presets

Text

Label

Weight

Transform

Font size14px

Letter spacing0px

Colors

Background

Text

Shape & spacing

Border radius4px

Padding X20px

Padding Y12px

Border

Style

Hover state

Hover bg

Hover text

Effect

Transition180ms

CSS Output

.button {  display: inline-flex;  align-items: center;  justify-content: center;  padding: 12px 20px;  background-color: #1D9E75;  color: #ffffff;  font-size: 14px;  font-weight: 500;  border-radius: 4px;  border: none;  cursor: pointer;  transition: all 180ms ease;} .button:hover {  background-color: #179060;  color: #ffffff;}

Was this tool helpful?

How to use

Pick a preset

Start from Solid, Outline, Ghost, Pill, Hard Shadow, Soft Shadow, or Dark — then customise.

Style the button

Adjust colours, font size, weight, letter spacing, padding, border radius, and border on the left panels.

Set hover state

Configure hover background, text colour, and choose Lift or Scale effect for the interaction.

Copy CSS

Get the complete .button and .button:hover CSS — ready to paste into your project.