Free Tool

CSS Button Generator

Design a button visually and copy the CSS — with a live preview that matches the output exactly and a WCAG contrast check.

Button text

Style preset

Background

Text

Hover bg

Hover text

Border radius: 6px

Padding V: 14px

Padding H: 32px

Font size: 16px

Font weight

Border width: 0px

Border color

Box shadow

Transition: 200ms

Width

We email the code only if you ask. No spam.

Want a full UI component library for your product? Parix.ai designs & builds UI/UX.

More free tools

Try a related tool

Hand-picked free tools that pair well with the CSS Button Generator.

From the blog