Generador de botones

Esta herramienta construye un botón CSS a partir de texto, colores, tamaño, borde, efecto hover y un box-shadow opcional, con una vista previa interactiva en vivo sobre la que puedes pasar el cursor. Devuelve una clase `.button { ... }` con una `transition: all 0.2s ease` y una regla `.button:hover` separada basada en el efecto hover elegido (oscurecer, aclarar, elevar o ninguno).

1. Introduce el texto del botón (el valor predeterminado es Click Me). 2. Elige los colores de fondo y de texto mediante los selectores de color o las entradas hexadecimales. 3. Ajusta Tamaño de fuente (10-32px), Padding X (8-48px), Padding Y (4-24px) y Radio de borde (0-50px) con los controles deslizantes. 4. Establece Color de borde y Ancho de borde (0-5px). 5. Elige un Efecto hover: oscurecer, aclarar, elevar o ninguno. 6. Opcionalmente activa Sombra y ajusta Desenfoque, Desfase X y Desfase Y. 7. Pasa el cursor sobre la vista previa para ver el efecto; haz clic en Copiar en la tarjeta de Salida CSS.

Oscurecer/aclarar ajustan el color de fondo en +/-30 unidades RGB mediante `adjustBrightness`. Elevar aplica `transform: translateY(-2px)` más un `box-shadow: 0 4px 8px rgba(0,0,0,0.2)` al hacer hover. Ninguno omite la regla hover por completo. La salida es una única regla `.button` que contiene background-color, color, font-size, padding, border-radius, border, cursor, transition y el box-shadow opcional, seguida del bloque `.button:hover` cuando corresponde. No se genera HTML.