Générateur de boutons

Cet outil construit un bouton CSS à partir du texte, des couleurs, du dimensionnement, de la bordure, de l'effet de survol et d'un box-shadow facultatif, avec un aperçu interactif en direct que vous pouvez survoler. Il produit une classe `.button { ... }` avec une `transition: all 0.2s ease` et une règle `.button:hover` séparée basée sur l'effet de survol choisi (assombrir, éclaircir, soulever ou aucun).

1. Saisissez le texte du bouton (la valeur par défaut est Click Me). 2. Choisissez les couleurs de fond et de texte via les sélecteurs de couleur ou les entrées hexadécimales. 3. Ajustez Taille de police (10-32px), Padding X (8-48px), Padding Y (4-24px) et Rayon de bordure (0-50px) avec les curseurs. 4. Définissez Couleur de bordure et Largeur de bordure (0-5px). 5. Choisissez un Effet de survol : assombrir, éclaircir, soulever ou aucun. 6. Activez facultativement Ombre et réglez Flou, Décalage X et Décalage Y. 7. Survolez l'aperçu pour voir l'effet ; cliquez sur Copier dans la carte Sortie CSS.

Assombrir/éclaircir ajustent la couleur de fond de +/-30 unités RGB via `adjustBrightness`. Soulever applique au survol `transform: translateY(-2px)` ainsi qu'un `box-shadow: 0 4px 8px rgba(0,0,0,0.2)`. Aucun omet entièrement la règle de survol. La sortie est une règle `.button` unique contenant background-color, color, font-size, padding, border-radius, border, cursor, transition et le box-shadow facultatif, suivie du bloc `.button:hover` le cas échéant. Aucun HTML n'est généré.