CSS Button Generator

About this tool

Buttons are among the most-iterated components in any UI — spacing, corner radius, color, and hover state all affect perceived clickability and brand alignment. Writing each permutation by hand and reloading the browser to check it burns time that should go to actual feature work. The CSS Button Generator gives you a live preview button while you adjust the core visual tokens: vertical and horizontal padding, border-radius, font size, background color, text color, border width and border color. An optional checkbox adds a hover rule that darkens the background by subtracting 22 from each RGB channel. The output is a paste-ready .btn rule plus the optional .btn:hover rule. It covers solid and outlined button styles; add extras such as font-weight, shadows, gradients or transitions in your own stylesheet.

Why use it

• Core Tokens: Padding, radius, font size, background, text color and border are all in one panel, and the preview button updates on every change — no switching files or reloading the browser.

• Hover Darken: One checkbox adds a .btn:hover rule whose background is your color with 22 subtracted from each RGB channel, a quick and consistent hover shade without picking a second color.

• Border Control: Border width and border color inputs cover outlined buttons. With the width at 0 the border is invisible, while the declaration stays in the rule so it is easy to switch on later.

• Full Class CSS: The output is a complete .btn rule plus, when enabled, a .btn:hover rule. Paste it into your stylesheet and add cursor, font-weight or transitions as your design system needs.

How to use

1. Enter Padding Y and Padding X in pixels to set the click target size
2. Set Radius (px) for the corner curve and Font size (px) for the label
3. Pick the Background and Text color with the color pickers
4. Set Border width and Border color — leave the width at 0 for no visible border
5. Keep "Add hover darken rule" checked to add a .btn:hover background 22 steps darker per RGB channel
6. Check the live preview, then click Copy CSS to get the .btn rule and optional .btn:hover rule

When it helps

• When designing the primary CTA button for a landing page and iterating on color, size, and corner radius
• When building a design system component library and need reproducible button token values
• When creating an outlined button variant with a visible border alongside the solid primary style
• When matching a button's font size and padding to the surrounding typography scale
• When updating an existing button's border-radius or hover state to match a rebrand
• When rapidly prototyping button styles for a client presentation without writing CSS from scratch

Examples

Padding Y 12, Padding X 24, Radius 8, Font size 16, Background #6366f1, Text #ffffff, Border width 0, hover darken on

.btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  background: #6366f1;
  color: #ffffff;
  border: 0px solid #d4a82a;
}
.btn:hover {
  background: #4d50db;
}

Padding Y 10, Padding X 20, Radius 6, Font size 14, Background #ffffff, Text #111827, Border 1px #d1d5db, hover darken on

.btn {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  background: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}
.btn:hover {
  background: #e9e9e9;
}

Padding Y 14, Padding X 28, Radius 50, Font size 16, Background #f97316, Text #ffffff, Border width 0, hover darken off

.btn {
  padding: 14px 28px;
  border-radius: 50px;
  font-size: 16px;
  background: #f97316;
  color: #ffffff;
  border: 0px solid #d4a82a;
}

Tips

• Set minimum tap targets at 44px height using padding, not just font size — 44×44px is the accessibility baseline for touch interfaces
• Add :focus-visible with a 2–3px ring or offset outline on every button — many designs skip this, but it is required for keyboard accessibility compliance
• Use transition: background 0.15s ease on the base rule for smooth hover response; 0.1–0.2s is the perceptual sweet spot for button interactions
• cursor: pointer signals interactivity on non-form elements — always include it on styled div or span buttons
• Include an explicit :disabled or [disabled] state with opacity: 0.5 and pointer-events: none so disabled buttons read correctly without custom JavaScript

Frequently Asked Questions

Glossary

Padding

The space between a button's text content and its border edge. Determines the click target size and the overall button proportions — larger padding creates more generous, spacious buttons.

Border Radius

The corner curvature of a button. Values range from 0 (sharp) through small values (4–8px, slightly rounded) to 9999px (pill-shaped full rounding).

Hover State

The visual appearance of a button when the cursor moves over it, typically a darker or lighter background, color change, or additional shadow to communicate interactivity and imminent click.

Cursor Pointer

A CSS declaration that changes the mouse cursor to a pointing hand when hovering over an element, signaling that the element is interactive and clickable.

Gradient Fill

A button background using linear-gradient() rather than a solid color, creating a smooth color transition across the button face often used for branded CTA styling.

Focus Ring

A visible outline or box-shadow applied to a button via :focus-visible that indicates keyboard focus, required for WCAG keyboard accessibility compliance.