Générateur de Boutons CSS
Générez des boutons CSS stylisés instantanément. Choisissez parmi flat, outlined, gradient, shadow et ghost — copiez le CSS et HTML en un clic.
① Tapez le texte du bouton ② Choisissez style et forme ③ Copiez CSS et HTML
Style
Forme
Couleur principale
#C9B89A
Comment ça marche
Chaque style utilise du CSS pur sans JavaScript. Flat et gradient utilisent des fonds remplis ; outlined et ghost utilisent des fonds transparents avec des bordures ; shadow ajoute un box-shadow coloré correspondant à la couleur du bouton.
Options de forme
Carré utilise border-radius 4px pour des coins nets. Arrondi utilise 8px pour un look moderne. Pill utilise 9999px pour créer une forme de capsule entièrement arrondie.
États hover
Le CSS généré inclut des styles hover utilisant opacity: 0.85 ou filter: brightness() afin que vous n'ayez besoin que d'une seule variable de couleur pour les états par défaut et hover.
.btn {
padding: 0.6em 1.4em;
cursor: pointer;
font-size: 15px;
font-family: inherit;
border-radius: 8px;
transition: all 0.2s;
background: #c9b89a;
color: #fff;
border: none;
}
.btn:hover {
opacity: 0.85;
}
Sortie HTML<button class="btn">Click me</button>
Qu'est-ce qu'un générateur de boutons CSS ?
Un générateur de boutons CSS est un outil qui produit une classe CSS .btn prête à l'emploi et le markup HTML correspondant pour des composants de boutons stylisés. Le design moderne des boutons implique des choix de background, border-radius, font-size et d'états hover interactifs. Les patterns courants incluent les boutons flat (remplissage solide), outlined (transparent avec bordure), gradient, shadow (lueur box-shadow) et ghost (remplissage semi-transparent).
Questions fréquentes
Un bouton flat utilise une seule couleur de fond solide sans dégradés ni ombres. Un bouton gradient utilise un linear-gradient de la couleur principale vers une teinte plus foncée, créant un look dimensionnel.
Le style outlined utilise un fond transparent avec une bordure colorée (2px solid) et du texte coloré. Au survol, le bouton gagne typiquement un fond subtil. Ce style convient comme bouton d'action secondaire.
Un bouton ghost utilise un fond légèrement teinté (couleur avec 13% d'alpha) et une bordure semi-transparente (44% d'alpha). Il crée une apparence minimale adaptée aux actions tertiaires.
La teinte plus foncée est calculée en convertissant la couleur hex en HSL et en réduisant la luminosité de 20%. Cela garantit que le dégradé va toujours de la couleur choisie vers une variante naturellement plus foncée.
Les boutons générés incluent un contraste suffisant pour la lisibilité. Pour une accessibilité complète, ajoutez des attributs aria-label et assurez-vous que les styles de focus sont visibles dans votre feuille de style.
Le CSS généré inclut des états hover. Pour ajouter focus et active, ajoutez :focus { outline: 2px solid {color}; outline-offset: 2px; } et :active { transform: scale(0.97); } au ruleset .btn.
Oui. Utilisez des noms de classe différents (ex. .btn-primary, .btn-outlined) et générez des CSS séparés pour chacun. Les formes et tailles de police peuvent être standardisées.