CSS Button Generator

Style a button with sliders and get three rules back: the resting button, a darker lifted hover state and a pressed active state.

Runs in your browserFree, no sign-upLast reviewed October 8, 2026

Live preview

Get started

CSS

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background: #4f46e5;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(79, 70, 229, 0.28);
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.button:hover {
  background: #2e24e0;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(79, 70, 229, 0.36);
}

.button:active {
  transform: translateY(0);
}

Values

Padding: 14px 28px
Hover background: #2e24e0
Shadow: 0 10px 20px rgba(79, 70, 229, 0.28)

Quick answers

What CSS does the generator output?: Three rules. .button sets inline-flex centring, padding, background, color, font-size, font-weight, border-radius, border: none, cursor: pointer, box-shadow and a transition. .button:hover darkens the background and lifts the button 1px. .button:active drops it back to its resting position.
How do I make a pill button in CSS?: Use a border-radius of at least half the button's height. Dragging Corner radius to its 60px maximum gives border-radius: 60px, which fully rounds the ends of any button up to 120px tall.
How is the hover colour chosen?: The background is converted to HSL and its lightness is reduced by 8 points, keeping the same hue. #2563eb becomes #1450d2 and #dc2626 becomes #bd1f1f. Pure black cannot get darker, so a #000000 button keeps the same hover colour.
How big should a button be?: WCAG 2.2 asks for a target of at least 24 by 24 CSS pixels at level AA and 44 by 44 at level AAA. A 16px label with 14px of vertical padding and a 1.5 line height is 52px tall, which clears both.
Can I use the generated CSS on a link?: Yes. The rule uses display: inline-flex, so it sizes an a element the same way as a button element. Add text-decoration: none for links, since the output does not remove the underline.
Does the generated button have a focus style?: No. Only the resting, hover and active states are written. Add your own rule, for example .button:focus-visible { outline: 2px solid; outline-offset: 2px; }, so keyboard users can see which control is selected.

Why use CSS Button Generator

This CSS button generator writes a complete .button rule plus .button:hover and .button:active, joined by a 200ms transition, so the result reacts to the pointer as soon as you paste it. You choose the background and text colours, vertical padding (4 to 40px), horizontal padding (8 to 80px), corner radius (0 to 60px), font size (12 to 28px), font weight (400 to 800) and shadow strength (0 to 60%). The hover background is your colour made 8 lightness points darker: the default #4f46e5 becomes #2e24e0. The shadow is tinted with the background colour, not grey. The output is CSS only, with no HTML, gradient, border or focus rule; the lines worth adding yourself are listed below.

CSS button examples with the settings that produce them

Results show the lines that differ between examples. Every output also includes the inline-flex, border, cursor and transition lines.

Default primary button

Starting values: Background #4f46e5, Text colour #ffffff, padding 14 and 28, Corner radius 12, Font size 16, Font weight 600, Shadow strength 28

padding: 14px 28px; background: #4f46e5; color: #ffffff; font-size: 16px; font-weight: 600; border-radius: 12px; box-shadow: 0 10px 20px rgba(79, 70, 229, 0.28); hover background: #2e24e0; hover box-shadow: 0 14px 26px rgba(79, 70, 229, 0.36)

Flat green pill for a checkout call to action

Background #16a34a, Vertical padding 16, Horizontal padding 40, Corner radius 60, Font size 18, Font weight 700, Shadow strength 0

padding: 16px 40px; background: #16a34a; font-size: 18px; font-weight: 700; border-radius: 60px; box-shadow: none; hover background: #117e39

Compact dark toolbar button

Background #111827, Vertical padding 6, Horizontal padding 14, Corner radius 6, Font size 14, Font weight 500, Shadow strength 0

padding: 6px 14px; background: #111827; font-size: 14px; font-weight: 500; border-radius: 6px; box-shadow: none; hover background: #05070b

Destructive action with a strong glow

Background #dc2626, Corner radius 8, Shadow strength 40

background: #dc2626; border-radius: 8px; box-shadow: 0 10px 20px rgba(220, 38, 38, 0.4); hover background: #bd1f1f; hover box-shadow: 0 14px 26px rgba(220, 38, 38, 0.48)

Amber button with dark text

Background #f59e0b, Text colour #111827, Vertical padding 12, Horizontal padding 24, Corner radius 4, Shadow strength 20

padding: 12px 24px; background: #f59e0b; color: #111827; border-radius: 4px; box-shadow: 0 10px 20px rgba(245, 158, 11, 0.2); hover background: #ce8509

Button background colours, hover shades and text contrast

Hover shades are this tool's output. Contrast ratios were measured with the site's colour contrast checker against the resting background.

Background	Generated hover	Text colour	Contrast ratio	WCAG AA for normal text (4.5:1)
#4f46e5 indigo	#2e24e0	#ffffff	6.29:1	Pass
#2563eb blue	#1450d2	#ffffff	5.17:1	Pass
#dc2626 red	#bd1f1f	#ffffff	4.83:1	Pass
#16a34a green	#117e39	#ffffff	3.30:1	Fail (passes the 3:1 large-text level only)
#f59e0b amber	#ce8509	#ffffff	2.15:1	Fail
#f59e0b amber	#ce8509	#111827	8.26:1	Pass
#111827 near black	#05070b	#ffffff	17.74:1	Pass

Large text means at least 24px, or about 18.7px in bold. Mid-tone greens, ambers and yellows usually need dark text. A white (#ffffff) background produces a #ebebeb hover shade and a white shadow that will not show on a white page.

How padding and font size set a button's height

button height = (font size x line height) + (2 x vertical padding)

The generated rule sets no height. The button is as tall as one line of text plus the padding above and below it. With the default 16px font, a line height of 1.5 and 14px of vertical padding, that is 24 + 28 = 52px. The output does not set line-height, so the value in force comes from the browser or your stylesheet: a button element typically uses the normal keyword, roughly 1.2 for many fonts, which would make the same button about 47px. Add line-height: 1.5 (or any fixed value) to the rule when you need a predictable height. Width works the same way: the label's width plus twice the horizontal padding.

Button size presets and the height each one gives

Heights are calculated with the formula above at line-height: 1.5. Enter the font size and padding into the sliders to get the matching CSS.

Size	Font size	Vertical padding	Horizontal padding	Height
Extra small	12px	4px	8px	26px
Small	14px	6px	14px	33px
Medium	16px	10px	20px	44px
Default	16px	14px	28px	52px
Large	18px	16px	40px	59px
Extra large	20px	18px	48px	66px

Extra small and Small fall under the 44px AAA target. If they will be tapped on a phone, add margin around them or switch to a larger size at narrow widths.

Lines to add after you paste the button CSS

The generator keeps its output short. These additions cover the cases it leaves out.

font-family: inherit; A button element does not pick up the page font by default, so without this line it may render in the system font.
line-height: 1.5; Fixes the height so it does not vary with the font.
text-decoration: none; Needed when the class is used on a link.
.button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } A visible focus ring for keyboard users. Choose an outline colour that stands out from the page behind the button.
.button:disabled { opacity: 0.5; cursor: not-allowed; } A disabled look. Also stop the hover lift with .button:disabled:hover { transform: none; }.
@media (prefers-reduced-motion: reduce) { .button { transition: none; } } Removes the animated lift for people who have asked their system for less motion.
The HTML itself: <button class="button" type="button">Get started</button>. Use type="submit" inside a form that the button should send.

How to use it

1
Type your text in Button label so the preview shows the real width. The label is for the preview only and is not part of the CSS.
2
Choose Background and Text colour.
3
Set Vertical padding and Horizontal padding to size the button, then Corner radius for the shape.
4
Adjust Font size and Font weight.
5
Set Shadow strength, or drag it to 0 for a flat button with box-shadow: none.
6
Check the Hover background stat, then copy the CSS block and apply the button class to a button or link.

Questions people ask

Why does the button move when I hover over it?

The hover rule includes transform: translateY(-1px), which lifts the button by one pixel, and the active rule sets it back to 0 so a click feels like a press. Transforms do not affect layout, so nothing around the button shifts. Delete both transform lines for a colour-only hover.

Can it make a gradient or outlined button?

No. The background is a single solid colour and the rule sets border: none. For an outline style, change the copied CSS by hand: set background to transparent, color to your brand colour and border to 2px solid currentColor.

Why is the shadow coloured and not grey?

The shadow takes the background colour at the opacity set by Shadow strength, so an indigo button casts an indigo glow. On hover the shadow grows from 0 10px 20px to 0 14px 26px and its opacity rises by 0.08. For a neutral shadow, replace the rgba() value with a dark grey.

Should I use a button element or a div?

Use a button element for actions and an a element for navigation. Both are focusable and work with the keyboard without extra code, and screen readers announce them correctly. A styled div has none of that unless you add a role, tabindex and key handlers yourself.

Does the Button label change the CSS?

No. The label only sets the text shown in the preview, so you can judge the width with your real wording. If the field is left empty the preview shows the word Button. Put the text in your own HTML.

Do I need vendor prefixes for this button CSS?

No. Every property in the output, including inline-flex, border-radius, box-shadow, transform and transition, works unprefixed in current browsers. Prefixed copies of these properties were only needed for browser versions that are long out of use.

How do I make the button full width?

Change display: inline-flex to display: flex, or add width: 100%. The label stays centred because the rule already sets justify-content: center.

Why 200ms for the transition?

It is short enough to feel immediate and long enough to be seen as a change, and it is applied to background, transform and box-shadow only. Edit the three 200ms values in the transition line to speed it up or slow it down.