Skip to main content
1

CSS Button Generator

NEW

Design good-looking CSS buttons visually — fill, border, radius, shadow and hover — then copy the CSS.

px
px
px
Fill
Color
Border
px
px
Box shadow

Preview

CSS

Send output to:
Advertisement

How to use CSS Button Generator

  1. Set the button text, padding, font size and weight, and text colour.
  2. Choose a solid or two-stop gradient fill, and toggle the border and shadow as needed.
  3. Pick a border-radius and a hover effect (lift, darken, or glow) and watch the live preview.
  4. Click Copy CSS to copy both the .btn and .btn:hover rules into your stylesheet.

What is CSS Button Generator?

This generator builds a complete CSS rule for a button from visual controls. Adjust the text, padding, font size and weight, text colour, a solid or two-stop gradient fill, an optional border, the border-radius, an optional drop shadow, and a hover effect, and the live preview updates on every change — including a working hover state applied to the preview button.

The output is a ready-to-paste .btn { … } block together with a matching .btn:hover { … } block, so you can drop both into your stylesheet and apply the btn class to any element. Everything is computed in your browser; nothing is uploaded.

Advertisement

FAQ

Does the preview show the real hover effect?
Yes. The generated hover rule is injected as a scoped style that targets only the preview button, so hovering over it shows exactly what the copied .btn:hover block will do.
Can I make a gradient button?
Tick the gradient toggle to switch the fill from a single colour to a two-stop linear gradient. You can pick both colours and set the gradient angle, and the hover effects work with gradients too.

Related tools

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement