Free CSS Button Generator
This button builder styles a call-to-action live: background, text colour, padding, radius and hover darkening. It is designed for consistent buttons across landing pages, emails-to-web campaigns and prototypes. Copy the CSS when it looks right. Nothing is uploaded.
How it works
Padding values split into vertical and horizontal parts; radius accepts pixels or a pill-style large number. The hover rule darkens the background by mixing toward black, keeping one-colour theming simple. Minimum 48px height comes from the padding chosen, supporting touch targets.
Example
| Style | Settings |
|---|---|
| Pill CTA | 14 28 padding, 999 radius |
Frequently asked questions
What makes a good button?
High contrast, one clear action, and at least 48px tall for touch. Colour draws the eye; wording closes the click.
Pill or square corners?
Both convert. Pick one shape and use it for every button on the site for consistency.
How do hover states work?
The generated :hover rule darkens the background so desktop users get feedback without extra code.
Can I use this in emails?
Email clients need inline styles and table layouts. Use the preview as a visual guide, then inline the CSS.
Is anything uploaded?
No. Everything renders locally in your browser.
Related tools
- CSS Gradient Generator , gradient backgrounds.
- Box Shadow Generator , button depth.
- HTML Layout Generator , pages for the buttons.
- Guide: Small Business Digital Toolkit