Buttons look simple until you count the decisions: padding, corner radius, background, text size, shadow, border and a hover state that ties it together. This generator turns those decisions into sliders and colour pickers with an instant preview, then writes the CSS for you — including the :hover rule — in clean, readable code you can paste into any project. It is the quickest route from “I need a nice button” to a finished, consistent style. Once the resting style looks right, treat the states as part of the same design job: hover should acknowledge the pointer within a frame or two, active should feel like a physical press (a pixel or two of travel, or a deepening shadow), and focus-visible deserves a clear outline for keyboard users — it is an accessibility requirement, not decoration. Designing all four states from one generator keeps their colours and geometry related, which is most of what “polished” means.
Quick Answer: Style your button with the controls — background, text colour, padding, radius, font size and shadow — preview it live, then copy the CSS including the automatic hover state.
Free Online Tool
CSS Button Generator
How to Use the CSS Button Generator
- Pick the background colour and text colour for your button.
- Adjust horizontal and vertical padding until the proportions feel right.
- Set the corner radius: square, softly rounded or full pill.
- Tune the font size and optional drop shadow.
- Preview the hover effect, then copy the CSS into your stylesheet.
Key Features
- Live preview with a working hover state
- Controls for colours, padding, radius, font size and shadow
- Automatically darkened hover colour in the output
- Clean, commented-free CSS ready to paste
- Free with no sign-up
Best Practices and Tips
- Keep button text short and action-led: “Download”, “Get started”, “Add to cart”.
- Check colour contrast — white text on light backgrounds fails accessibility guidelines.
- Use one primary button style per page so the main action is unmistakable.
- A subtle shadow plus a slightly darker hover gives depth without extra images.
- Generous padding (at least 12px vertical) keeps buttons tappable on phones.
- Test your button at 200% zoom and with a greyscale filter: if the label disappears or the shape relies on one hue to read as clickable, strengthen contrast and borders before shipping.
Common Mistakes to Avoid
- Making every button a different colour, which destroys visual hierarchy.
- Tiny padding that looks fine on desktop but is miserable to tap on mobile.
- Hover states that shift the layout because a border appears only on hover.
- Text colours that fail contrast checks against the chosen background.
Frequently Asked Questions
How is the hover colour chosen?
The generator darkens your background colour by a fixed step for the :hover rule, producing a natural pressed/hover feel you can fine-tune in your CSS afterwards.
Can I make a pill-shaped button?
Yes — raise the border radius to a large value (for example 999px) and the button becomes a full pill at any size.
Where do I paste the CSS?
Into your site stylesheet, then give your button element the class from the generated code (or rename the selector to match your markup).
Does the output use any framework?
No. It is plain, dependency-free CSS that works in any project.
Is this button generator free?
Yes — free, unlimited and no sign-up required.
Should buttons have shadows?
Shadows are optional decoration; what is not optional is affordance — the element must unmistakably read as pressable through shape, contrast and label, shadow or not.