Free Online Tool

CSS Button Generator

Design beautiful CSS buttons visually. Customize colors, gradients, borders, shadows, hover effects, and animations — then copy the CSS.

Presets

Typography

Button text

Font size (px)

16px

Font weight

Letter spacing

0px

Colors

Text color

Text

BG 1

BG 2

Hover

Border

Shape & Size

Padding H (px)

28px

Padding V (px)

12px

Border radius (px)

8px

Border width (px)

0px

Shadow & Effect

Shadow blur (px)

0px

Hover effect

Preview

Generated CSS

CSS Button Generator

Create pixel-perfect CSS buttons without writing code. This tool outputs clean, production-ready CSS with proper :hover and :active states, gradient backgrounds, box shadows, and smooth transitions.

Button Styles

Gradient — uses linear-gradient for a modern look
Outline — transparent background with a colored border
Ghost — minimal style, border appears only on hover
Flat — solid color, no gradient
Pill — fully rounded corners