Why does the rule include `cursor: pointer`?

Browsers do not show the hand cursor on ` ` elements by default. Adding `cursor: pointer` makes them feel clickable, matching most users’ expectation from ` ` links.

How do I add a focus ring?

Add a `:focus-visible` rule with `outline: 2px solid ; outline-offset: 2px;`. This tool emits the base + hover rules; copy the output and add the focus-visible rule for keyboard accessibility.

What is a good padding for a button?

For most desktop UIs, 10–12 px vertical / 16–24 px horizontal feels balanced at the default 14–16 px font size. Touch UIs benefit from a minimum 44×44 px tap target — use 12+ px vertical and 24+ px horizontal.

Why does the box-shadow field accept a string instead of split inputs?

box-shadow has up to four numbers plus a color and can have multiple comma-separated layers. Letting you type the full declaration is more flexible than three separate inputs; for layered shadows, use the dedicated CSS Box Shadow Generator.

Will the generated CSS work with Tailwind?

Yes — drop it into your global stylesheet, an `@layer components` block, or apply it as a single `className` on a ` `. Tailwind does not care where the rule originated.

CSS Button Generator

CSS button styler with hover state and a copyable rule.

Written by Golam Rabbani, Founder & Lead Engineer

This interactive tool requires JavaScript. Read the formula and worked example below; you can compute the result by hand.

How to use this css button generator

Type a label so the preview shows real text at the right width.
Set background, text, and hover-background colors using the color pickers.
Adjust padding (Y and X), border radius, font size, and font weight to match your design system.
Optionally set border width/color and a `box-shadow` declaration for elevation.
Press Generate CSS, then Copy CSS to grab a `.btn` rule plus its `.btn:hover` rule.

About this css button generator

The CSS button generator outputs two rules that fully describe a button: a base `.btn` declaration plus a `.btn:hover` declaration that swaps the background color. The base rule covers every property you typically need in a design system — background, color, padding, border-radius, font-size, font-weight, border, and box-shadow — plus a `transition: background 150ms ease` so the hover swap feels smooth. The preview button lives above the form so it paints first as the LCP element and reacts to mouse and keyboard focus so you can verify both states.

Worked example: pick label "Get started", background #6366f1, text #ffffff, hover-background #4f46e5, padding Y=10, padding X=20, radius=8, font size=14, weight=500, border width=0, shadow `0 2px 4px rgba(0,0,0,0.10)`. The output is: ``` .btn { background: #6366f1; color: #ffffff; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 500; border: 0px solid #4338ca; box-shadow: 0 2px 4px rgba(0,0,0,0.10); cursor: pointer; transition: background 150ms ease; } .btn:hover { background: #4f46e5; } ``` That is a complete primary button matching the standard "indigo CTA" used by countless apps.

FAQ

Why does the rule include `cursor: pointer`?: Browsers do not show the hand cursor on `<button>` elements by default. Adding `cursor: pointer` makes them feel clickable, matching most users’ expectation from `<a>` links.
How do I add a focus ring?: Add a `:focus-visible` rule with `outline: 2px solid <color>; outline-offset: 2px;`. This tool emits the base + hover rules; copy the output and add the focus-visible rule for keyboard accessibility.
What is a good padding for a button?: For most desktop UIs, 10–12 px vertical / 16–24 px horizontal feels balanced at the default 14–16 px font size. Touch UIs benefit from a minimum 44×44 px tap target — use 12+ px vertical and 24+ px horizontal.
Why does the box-shadow field accept a string instead of split inputs?: box-shadow has up to four numbers plus a color and can have multiple comma-separated layers. Letting you type the full declaration is more flexible than three separate inputs; for layered shadows, use the dedicated CSS Box Shadow Generator.
Will the generated CSS work with Tailwind?: Yes — drop it into your global stylesheet, an `@layer components` block, or apply it as a single `className` on a `<button>`. Tailwind does not care where the rule originated.