🔘 CSS Button Generator

Configure padding, border radius, colors and shadow to build a styled button CSS snippet.

Background

Text Color

Border Radius (px)

Padding (px v/h)

Shadow

What the five controls produce

The output is a flat block of declarations you paste into a rule of your own. The defaults give:

background: #007BFF;
color: #ffffff;
border: none;
border-radius: 8px;
padding: 12px 24px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 3px 8px rgba(0,0,0,0.2);

The padding box takes two numbers separated by a space - vertical first, then horizontal. Type one number and it is used for both, so "16" becomes padding: 16px 16px. Anything that is not a number in either position stops the render with an error rather than emitting a broken rule. The shadow is fixed at 0 3px 8px rgba(0,0,0,0.2); the dropdown only decides whether that line is included.

What you still have to add

Hover, focus and active states. None are generated. At minimum add a :hover with a darker background and a visible :focus-visible outline - removing the default border also removes the focus ring on some browsers.
A disabled style, since cursor: pointer will otherwise still say "clickable" on a button that is not.
Horizontal padding of roughly twice the vertical reads as balanced. The 12/24 default is that proportion.

Check the colour pair before you ship it. The default white on #007BFF is only 3.98:1 - under the 4.5:1 WCAG AA needs for normal text, though it clears the 3:1 bar for large text and for the button's own visual boundary. Darkening the background to #0069D9 lifts it to 5.22:1.

Frequently asked questions

How much padding should a button have?

12px vertical by 24px horizontal is a comfortable default for 16px text. Keep the whole target at least 44px tall for touch, which 12px padding plus a normal line height reaches.

How do I add a hover effect to this button?

Add a second rule with the same selector plus :hover, change only the background to a darker shade, and put transition: background 0.15s on the base rule so the change is not abrupt.

Why does my button still look like a default browser button?

Some browsers apply their own appearance to button elements. Add appearance: none and font: inherit alongside these declarations, since font family and size are not inherited by form controls.