CSS Button Generator

Design a button visually and copy the CSS — colors, padding, radius, border and shadow, with a live preview.

Frequently asked questions

How do I use the generated CSS?

Copy it and apply the .button class to any

Can I add a hover effect?

This generates the base style. A common hover is to darken the background slightly or add a subtle transform; paste the CSS into your stylesheet and add a :hover rule.

Does it work for links too?

Yes — the same CSS works on an styled as a button; just add display:inline-block and text-decoration:none.