CSS Button Generator

The CSS Button Generator is a live visual editor that builds a complete <code>.button</code> rule plus a matching <code>.button:hover</code> rule from roughly twenty-five style parameters, organized into five tabs: Text, Background, Border, Shadow, and Hover. The Text tab controls font size (10-32px), font weight stepped in increments of 100 from 100 to 900, text color, letter spacing (-2 to 10px), and a text-transform toggle (none / uppercase / lowercase / capitalize). The Background tab switches between a solid color and a CSS linear-gradient with start color, end color, and an angle slider from 0 to 360 degrees (default 135deg), and also houses the horizontal and vertical padding sliders (paddingX 4-60px, paddingY 2-40px). The Border tab exposes width (0-10px), a none/solid/dashed/dotted style toggle, color, and a border-radius slider running all the way to 100px so you can reach fully rounded pill shapes.

The Shadow tab generates a single box-shadow whose opacity is applied by converting the chosen hex color to rgba through an internal hexToRgba helper, so a shadow color of #000000 at 20% opacity emits rgba(0, 0, 0, 0.2) rather than a flat hex value; you control offset X and Y (-20 to 20px), blur (0-50px), and spread (-20 to 20px). The Hover tab is where this tool goes beyond a static style picker: it captures a distinct hover background, hover text color, a scale transform driven by a slider from 0.95x to 1.20x, a separate hover shadow Y offset, and a transition duration from 0 to 500ms in 25ms steps. Those hover values are written into the generated <code>.button:hover</code> block as background, color, border-color, transform: scale(...), and a recomputed box-shadow, and the whole rule carries transition: all Nms ease so the state change animates. One honest limitation to know: when background type is set to gradient, the generated hover rule re-emits the same gradient, so a gradient button does not get a separate hover background from the CSS output.

The tool ships twelve named presets that overwrite the working style: Primary, Secondary, Success, Danger, and Warning map to Tailwind-style brand colors with matching darker hover shades; Outline and Ghost use a transparent background (Ghost hovers to a translucent rgba(59, 130, 246, 0.1)); Pill forces a 9999px radius; Gradient applies a pink-to-violet linear gradient; 3D uses a hard zero-blur offset shadow in a darker blue to fake depth; Neon pairs a transparent fill with a colored border and a 20px colored glow; and Minimal strips the shadow for a flat text-style button. Every control is mirrored into the URL via useUrlStates, so the full configuration is encoded in query parameters and the Share button produces a link that reopens the exact button; the Generated CSS panel copies the rule to the clipboard with a two-second confirmation. The output is plain hand-written CSS targeting a <code>.button</code> class with no vendor prefixes, no focus-visible or :active states, and no accessibility scaffolding, so you should add your own keyboard-focus styling and verify text-on-button contrast before shipping.