Button Generator

This tool builds a CSS button from text, colors, sizing, border, hover effect, and optional box-shadow, with a live interactive preview you can hover. It outputs a `.button { ... }` class with a `transition: all 0.2s ease` and a separate `.button:hover` rule based on the chosen hover effect (darken, lighten, lift, or none).

1. Enter Button Text (defaults to Click Me). 2. Pick Background and Text colors via the color pickers or hex inputs. 3. Adjust Font Size (10-32px), Padding X (8-48px), Padding Y (4-24px), and Border Radius (0-50px) with sliders. 4. Set Border Color and Border Width (0-5px). 5. Choose a Hover Effect: darken, lighten, lift, or none. 6. Optionally enable Box Shadow and tune Blur, Offset X, and Offset Y. 7. Hover the preview to see the effect; click Copy on the CSS Output card.

Darken/lighten adjust the background color by +/-30 RGB units via `adjustBrightness`. Lift applies `transform: translateY(-2px)` plus a `box-shadow: 0 4px 8px rgba(0,0,0,0.2)` on hover. None omits the hover rule entirely. The output is a single `.button` rule containing background-color, color, font-size, padding, border-radius, border, cursor, transition, and optional box-shadow, followed by the `.button:hover` block when applicable. No HTML is generated.