CSSAwwwards
+ Submit tool
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.

Click me

Hover to preview interaction

Presets

Text

14px
0px

Colors

Shape & spacing

4px
20px
12px

Border

Hover state

180ms
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;}

How to use

01

Pick a preset

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

02

Style the button

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

03

Set hover state

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

04

Copy CSS

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

More CSS generator tools

From our directory of 30+ CSS tools.

Browse all →

Know a great CSS tool?

Submit it to the directory and help developers discover it.

Submit a tool →