CSS Button Style Generator

Design a button visually — set padding, radius, colors, shadow — and get production-ready CSS with :hover and :active states.

Colors

Sizing

Shadow

Text

HOVER & ACTIVE PREVIEW

Hover or click the button above to see all 3 states.

Button styled — adjust controls above to customize.

How to Use the CSS Button Generator

  1. Adjust colors — pick background, text, and border colors using the color pickers. The preview updates instantly.
  2. Set sizing — use sliders to control vertical/horizontal padding, font size, border radius, and border width.
  3. Add a shadow — increase Shadow Blur or Shadow Spread to add depth to your button.
  4. Try a preset — click Presets to load a common button style (Primary, Ghost, Pill, Danger) as a starting point.
  5. Copy the CSS — switch to the Code tab and click Copy CSS to get the full CSS with :hover and :active states.

CSS Button Design Principles

A well-designed button communicates its state clearly to users. There are three main states every button should define: default (resting), hover (pointer over), and active/pressed (clicking). Each state should be visually distinct so users receive feedback confirming their interaction. Modern design systems typically achieve this by adjusting brightness (darker on hover, darkest on press), scale (slight scale-down on press), or transition speed.

The Role of Border Radius

Border radius is one of the most impactful properties for button aesthetics. Sharp corners (border-radius: 0) convey authority and precision — used by enterprise software and government sites. Subtle rounding (4-6px) is the most common choice for SaaS products and developer tools. Large rounding (12-16px) gives a friendly, modern feel used by consumer apps. Full pill rounding (9999px) creates a bubbly, approachable style used by social media platforms. Match your button radius to your card and input radius for a cohesive system.

Padding Guidelines

Button size should communicate importance. For primary CTAs, use generous padding: 12-16px vertical, 24-32px horizontal. For secondary actions, 8-12px vertical, 16-20px horizontal. For toolbar or compact buttons, 4-8px vertical, 10-14px horizontal. The minimum touch target for mobile accessibility is 44x44px (WCAG 2.5.5), so never set padding too small on buttons that appear on mobile interfaces.

Color and Contrast

Button text must meet WCAG 2.1 AA contrast requirements: at least 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold). White text on a medium-green button (like the default #10b981) achieves a ratio of about 3:1 — sufficient for large button text. For small text labels, prefer a darker background. Use our Color Contrast Checker to verify your combination before shipping.

Hover and Active States

The generated CSS uses filter: brightness() to automatically darken the background on hover and active states, which works for any background color without needing separate color values. Hover typically reduces brightness to 90%, active to 80%. A transform: scale(0.98) on active adds a subtle press-down effect. Add transition: all 0.15s ease to smooth the state changes — anything faster feels abrupt, anything slower feels laggy.

Box Shadow for Depth

A subtle box shadow (box-shadow: 0 2px 8px rgba(0,0,0,0.15)) lifts the button off the page and signals interactivity. Elevated buttons invite clicking. Flat buttons with no shadow are common in minimal design systems where visual noise is avoided. For glassmorphism or neumorphic styles, shadows are more complex — see our Glassmorphism Generator for those effects.

Frequently Asked Questions

The generator automatically darkens your background color using CSS filter: brightness() for :hover and :active states. You can see the live effect by hovering or clicking the preview button in the checkerboard area.
Yes. The generated CSS is plain CSS3 with no framework dependencies. You can paste it into vanilla CSS files, SCSS, styled-components, CSS modules, Tailwind @layer blocks, or any other CSS system.
The presets include: Primary (solid emerald green), Ghost (transparent with border), Pill (fully rounded), Danger (red solid), Outlined (colored border + text), and Flat (no border). Each preset loads a complete set of values you can then customize further.
In the Design tab, use the Shadow Blur and Shadow Spread sliders. A non-zero blur adds a soft shadow using your border color at reduced opacity. You can see the shadow update in real time on the preview button.
Border-radius rounds the corners of an element. Common values: 0px = sharp square corners; 4-6px = subtle rounding (most UI frameworks); 8-12px = modern card-style buttons; 50px or 9999px = fully rounded pill buttons. Match the radius to your overall design system.