CSS Button Generator

How to use the css button generator

1. Adjust the controls and watch the preview update.
2. Read the generated CSS below the controls.
3. Copy it into your stylesheet.

About this tool

Most of what makes a button feel right is padding and radius rather than colour. Horizontal padding should be noticeably larger than vertical — roughly twice — or the label looks cramped against the edges.

Size matters more than style for usability: a touch target below about 44px tall is hard to hit reliably on a phone, regardless of how it looks. The generator reports the resulting height so you can check.

What this cannot generate for you is the hover, focus and disabled states, and those are the ones that get skipped. In particular, never remove the focus outline without replacing it with something equally visible — keyboard users lose their place entirely without it.

Common uses

• Prototyping a button style quickly.
• Matching an existing button from a design.
• Teaching how padding and radius change a button's feel.

Frequently asked questions

How big should a button be?

At least about 44px tall for reliable tapping on a phone. Horizontal padding around twice the vertical padding usually looks balanced.

What about hover and focus states?

Those are not generated here. Add a hover colour and, importantly, a visible focus style — removing the outline without replacing it makes keyboard navigation unusable.

Should I use a button or a link?

A button performs an action; a link navigates. Style them however you like, but use the element that matches the behaviour so assistive technology announces it correctly.