Overview
A button style builder that turns label, colors, padding, radius, font size and shadow depth into a production-shaped CSS class. The generated rules include hover and active states: hover brightens the background and optionally lifts the button one pixel, active settles it back down. The preview renders the styled button live next to the code.
How It Works
Type the label and pick background and text colors. Drag corner radius from 0 to 32 pixels, horizontal padding from 8 to 48, vertical padding from 4 to 28, font size from 10 to 24, and shadow depth from 0 to 12. The Lift on hover checkbox adds the translateY movement to the hover rule. The preview shows the button as it will render, and the output emits a .btn-primary class with base, :hover and :active rules ready to copy.
Step-by-Step Usage Guide
- Type the label and pick background and text colors.
- Set radius, padding, font size and shadow depth.
- Toggle the hover lift as desired.
- Copy the .btn-primary rules including hover and active states.
Technical Specifications & Standards
Shadow depth maps to a two-part shadow: the vertical offset equals the depth in pixels and the blur equals three times the depth, with a fixed 0.2 alpha black. Depth zero omits the box-shadow line entirely instead of emitting a zero shadow. The hover state uses filter: brightness(1.08) rather than a second background color, so one rule brightens any color you pick, and the one-pixel translateY lift is opt-in via the checkbox. The active rule returns translateY to zero and dims slightly with brightness(0.96), which gives the press a physical dip and rise. Transitions cover transform and filter at 0.15 seconds, both cheap properties. What the output does not include is a :focus-visible outline; add one yourself so keyboard users get an indicator that hover-only styling never provides.
Targeted Use Cases
- Primary calls to action on marketing pages.
- Consistent button tokens for a small design system.
- Quickly exploring padding and radius combinations before committing to CSS.
- Adding a tactile press state to an existing flat button.
Notes & Gotchas
- Add a :focus-visible outline to the copied class; hover states do not help keyboard users.
- Keep shadow depth proportional to elevation hierarchy: primary buttons deeper, secondary buttons flat.
- Use the hover lift sparingly, on clickable cards and primary actions only.
- Ensure text contrast against your chosen background meets WCAG ratios; the tool does not check it.
Frequently Asked Questions
How is the shadow derived from the depth value?
The vertical offset equals the depth and the blur is three times the depth, using black at 20 percent opacity. A depth of zero omits the shadow declaration altogether.
Why does hover use brightness instead of a color change?
filter: brightness(1.08) lightens whatever background you chose by the same factor, so the single hover rule works for every color combination without maintaining a second hover color per button.
What happens on click?
The :active rule resets the lift to zero and applies brightness(0.96), so the button dips down and slightly darkens while pressed, then springs back to the hover state on release.
Does the output include a focus style?
No. The generated CSS covers base, hover and active. Add a :focus-visible outline rule after pasting so keyboard navigation has a visible indicator.