UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

CSS Button Generator

Style padding, radius, colors, borders, and optional hover darken with instant previews.

About CSS Button Generator

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 provides a real-time side-by-side preview of default and hover states while you adjust every visual token: padding, border-radius, background fill or gradient, text color, font weight, box shadow, and border. The output includes the base .btn rule and its :hover state as a complete, paste-ready CSS class. Covers solid, outline, and gradient button styles used across the overwhelming majority of web UI patterns.

Why use CSS Button Generator

All Tokens

Padding, border-radius, background, text color, font weight, border, and box-shadow in a single panel. No switching between multiple generators for a single component — every visual property that affects button appearance is adjustable without leaving the tool.

Hover Preview

A side-by-side preview shows the default and hover states simultaneously. You can see whether the hover color shift feels strong enough without toggling in the browser, and iterate the darken or lighten amount until the affordance communicates correctly.

Gradient Fill

Toggle between solid background and linear gradient fill without breaking the layout of the controls. The gradient fill adds a two-stop angle picker so branded gradient CTAs like diagonal warm-to-cool flows are configurable in the same panel as solid primary buttons.

Shadow Layer

The elevation shadow control adds a colored box-shadow that matches the button background at reduced opacity — the same technique used in modern design systems to add glow and lift without dark generic shadows. Adjust the blur and alpha to control intensity.

Border Picker

For ghost and outline button variants, the border control sets width, color, and whether the hover state fills the button or just brightens the border. Outline buttons often need hover states that differ from solid buttons — both are configurable.

Full Class CSS

The output includes the complete .btn rule and the .btn:hover state as a ready-to-use CSS class, not a snippet of individual properties. Paste it into your stylesheet and the button is styled end-to-end including hover behavior.

How to use CSS Button Generator

  1. Set top/bottom and left/right padding with the sliders to establish the click target size
  2. Drag the border-radius slider from sharp to pill using the corner-curve control
  3. Pick a solid background color or enable gradient fill with the fill toggle
  4. Set text color and font weight to complete the foreground typography
  5. Configure box-shadow and border if adding elevation or an outline style
  6. Click Copy CSS to get the complete .btn and .btn:hover rule block

When to use CSS Button Generator

  • When designing the primary CTA button for a landing page and iterating on color, size, and shadow
  • When building a design system component library and need reproducible button token values
  • When creating an outline or ghost button variant alongside the solid primary style
  • When adding a gradient button for a promotional section or hero area
  • 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

Primary indigo CTA

Input: Padding: 12px 24px, radius: 8px, bg: #6366f1, color: white, shadow: 0 4px 14px rgba(99,102,241,0.4)

Output: .btn { padding: 12px 24px; border-radius: 8px; background: #6366f1; color: #ffffff; border: 0; font-weight: 600; box-shadow: 0 4px 14px rgba(99,102,241,0.4); cursor: pointer; } .btn:hover { background: #4f46e5; }

Ghost outline button

Input: Padding: 10px 20px, radius: 6px, background: transparent, border: 1px #d1d5db, color: #111827

Output: .btn { padding: 10px 20px; border-radius: 6px; background: transparent; color: #111827; border: 1px solid #d1d5db; cursor: pointer; } .btn:hover { background: #f3f4f6; }

Gradient pill button

Input: Padding: 14px 28px, radius: 9999px, gradient: 135deg #f6d365 to #fda085, color: white

Output: .btn { padding: 14px 28px; border-radius: 9999px; background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); color: #ffffff; border: 0; font-weight: 600; cursor: pointer; }

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

What padding makes buttons feel comfortable to click?▾
A horizontal padding of 20–28px and vertical padding of 10–14px works for most standard buttons. This produces a tap target taller than 44px (Apple's recommended minimum) at standard 16px font sizes. Increase padding for primary CTAs; reduce it for secondary or compact buttons.
Should buttons have border-radius or stay sharp?▾
Fully sharp corners (0px) work for boxy editorial and brutalist designs. Slightly rounded (4–8px) reads as professional and approachable in most SaaS products. Pill-shaped (9999px) skews friendly and modern, used widely in consumer apps. Match your overall design system's rounding scale.
How do I add a focus ring for keyboard accessibility?▾
Add a :focus-visible rule with outline: 2px solid or box-shadow: 0 0 0 3px to provide a visible keyboard focus indicator. Use :focus-visible rather than :focus to avoid showing the ring on mouse clicks, which improves the visual experience without sacrificing accessibility.
What is the minimum tap target size for mobile buttons?▾
44×44px is Apple's recommendation; Google's Material Design specifies 48×48dp. WCAG 2.5.5 (AAA) recommends 44×44 CSS pixels. The button's visual size can be smaller if you extend the hit area with padding or a ::after pseudo-element.
Can I animate the hover transition smoothly?▾
Yes. Add transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease to the base .btn rule. The browser interpolates between the default and hover values over the specified duration, producing a smooth visual response.
How do I create a disabled button state?▾
Set opacity: 0.5 and pointer-events: none on .btn:disabled, .btn[disabled]. The opacity communicates unavailability and pointer-events prevents interaction. Always also set cursor: not-allowed to reinforce the disabled state visually.
Should I use button or a tag for navigation?▾
Use <button> for actions that do not change the URL (submitting forms, opening modals, triggering JavaScript). Use <a href> for navigation that changes the URL. Misusing these elements breaks screen reader announcements and keyboard navigation expectations.
Why does my button shrink when wrapped in flex?▾
Flex containers set align-items: stretch by default, which stretches items to the container's cross-axis height. A button inside a flex row can appear to lose its natural height. Add align-self: flex-start or align-items: center to the flex container to prevent unexpected stretching.

Explore the category

CSS Beautifier Beautify CSS with clean indentation and optional comment preservation. CSS Box Model Visualizer Visualize the CSS box model interactively — adjust margin, border, padding, and content size to understand element dimensions. Box Shadow Generator Tune blur, spread, offsets, color, and inset shadows with an instant CSS preview. Border Radius Generator Shape corners with unified or per-corner sliders and export shorthand border-radius CSS. Aspect Ratio Helper Convert width and height pairs into modern aspect-ratio CSS plus legacy padding hacks. CSS Minifier Minify CSS by removing comments and whitespace
CSS Custom Properties (Variables) Explained with Real Examples CSS custom properties are far more powerful than SASS variables — they are live, inheritable, and can be changed with JavaScript at runtime. Apr 2026 · 8 min CSS Specificity: The Complete Guide to the Cascade and Inheritance CSS specificity is the invisible rule that decides which style wins when two selectors target the same element. Understanding it lets you de Apr 2026 · 9 min Flexbox vs Grid: When to Use Which CSS Layout System Flexbox and Grid are not competing technologies — they solve different layout problems. Knowing which to reach for makes your CSS cleaner an Apr 2026 · 9 min

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.