Générateur de Boutons CSS
Un générateur de boutons CSS transforme des réglages visuels en une règle prête à coller. Un bouton n'a besoin que de background-color, color, padding et border-radius ; la bordure est facultative et le padding s'écrit vertical puis horizontal. Exemple : padding: 12px 24px; border-radius: 8px; background-color: #2563eb; color: #ffffff donne un bouton bleu arrondi dont le libellé passe le niveau AA des WCAG à 5,17:1.
Aperçu
Contrôle d'accessibilité
Personnaliser
Modèles Rapides
Code Généré
Outils populaires
À propos de Générateur de Boutons CSS
Le générateur de boutons CSS transforme quelques curseurs et sélecteurs de couleur en l'unique règle CSS dont un bouton a besoin. Vous réglez le libellé, la couleur de fond et celle du texte, la taille et la graisse de police, les marges intérieures horizontale et verticale, l'arrondi des angles, l'épaisseur et la couleur de bordure, ainsi qu'une des quatre profondeurs d'ombre ; une seconde couleur facultative transforme l'aplat en dégradé linéaire à 135 degrés. L'aperçu est placé au-dessus des réglages et c'est un vrai bouton HTML dessiné à la taille qu'il aura sur votre page, donc ce que vous validez est ce que vous livrez.
Deux choses rendent la sortie utilisable plutôt que décorative. D'abord, le panneau de code a deux onglets : une classe .btn réutilisable avec ses règles :hover, :active, :focus-visible et :disabled à déposer dans une feuille de style, et le même élément button avec tout en ligne dans un attribut style pour les constructeurs de pages, les blocs de CMS et les modèles d'e-mail qui suppriment le CSS externe. Ensuite, le panneau d'accessibilité mesure le couple de couleurs selon les WCAG 2.2 et affiche le rapport de contraste avec un verdict AAA, AA ou échec, en basculant sur les seuils du grand texte quand la taille et la graisse le justifient.
Il indique aussi la hauteur rendue - deux fois la marge verticale, plus deux fois la bordure, plus 1,2 fois la taille de police, l'interligne que la règle fixe pour que le bouton à l'écran fasse exactement la hauteur annoncée - face aux cibles de 24 x 24 et 44 x 44 pixels CSS des critères 2.5.8 et 2.5.5.
Un dégradé est vérifié sur ses deux arrêts et c'est le pire des deux rapports qui est affiché. Les huit modèles - Principal, Danger, Succès, Contour, Pilule, Dégradé, Discret et Néon - sont des points de départ, pas un aboutissement : cliquez, puis continuez à ajuster. Aucune couleur, aucun libellé et aucune position de curseur n'est envoyé où que ce soit ; le calcul du contraste, l'aperçu et le code sont produits dans la page elle-même, et c'est pourquoi le rapport se met à jour à la frappe même qui redessine le bouton. Ce que vous copiez est une simple classe, sans framework à installer, sans étape de compilation et sans script d'exécution.
Cas d'utilisation
Comment utiliser
Saisissez le texte à afficher sur le bouton dans le champ Texte du bouton, puis définissez la couleur de fond et celle du texte à l'aide des échantillons ou en tapant les codes hexadécimaux à côté.
Faites glisser les curseurs de taille de police, de marge intérieure horizontale, de marge intérieure verticale et d'arrondi des angles pour façonner le bouton, et augmentez l'épaisseur de bordure avec une couleur de bordure pour un rendu contour.
Choisissez une Épaisseur du texte parmi Normal, Moyen, Demi-gras ou Gras, et une Ombre parmi Aucun, Petite, Moyenne ou Grande.
Cochez Dégradé et choisissez la seconde couleur pour transformer le fond en dégradé diagonal bicolore.
Cliquez sur une carte Modèles Rapides telle que Principal, Contour, Pilule, Dégradé, Discret ou Néon pour charger un style tout prêt que vous pourrez continuer à ajuster.
Validez le rendu du bouton dans le panneau Aperçu, basculez l'onglet de sortie sur CSS ou HTML + CSS, puis appuyez sur l'icône de copie du bloc de code.
Astuces Pro
- Réglez la taille de police avant tout le reste. Le padding et le rayon sont bien plus faciles à juger une fois le libellé à sa taille définitive, et l'affichage de hauteur (2 x padding vertical + 2 x épaisseur de bordure + 1,2 x taille de police) suit.
- Chargez un modèle, puis ajustez. Contour et Discret partent déjà avec une épaisseur de bordure supérieure à zéro, c'est le chemin le plus court vers un bouton secondaire.
- Tapez les codes hexadécimaux dans le champ à côté de chaque pastille plutôt que de chercher dans le sélecteur de couleur ; l'aperçu et le rapport de contraste se mettent à jour à chaque frappe.
- Le niveau AA s’applique à toutes les tailles de texte ; seul le seuil change : 4,5:1 pour le texte normal, 3:1 dès que le libellé atteint 24px, ou 18,66px en gras. Un couple à 3:1 peut sembler correct sur un écran lumineux et devenir illisible en extérieur : traitez ce seuil bas comme un plafond, pas comme un objectif.
- Les dégradés sont vérifiés sur leurs deux arrêts et c'est le pire rapport qui est affiché : si un seul côté échoue, déplacez cet arrêt plutôt que de recolorer tout le bouton.
Dépannage
Le CSS copié n'a aucun effet visible sur ma page.
La classe est écrasée, ou n'a jamais été appliquée. Vérifiez que l'élément porte bien class="btn", chargez votre feuille de style après le CSS du framework, et ouvrez le panneau Styles des outils de développement : une déclaration barrée signifie qu'un autre sélecteur l'emporte par spécificité ou par ordre.
Le dégradé paraît plat ou n'apparaît pas du tout.
Un dégradé est une image de fond, pas une couleur de fond. Cochez Dégradé pour que l'outil produise background: linear-gradient(...) au lieu de background-color. S'il ne s'affiche toujours pas, cherchez une propriété raccourcie background ou un background-image déclaré plus loin sur le même élément : le raccourci remet background-image à none et efface le dégradé. Une background-color placée plus loin ne peut pas le masquer, car CSS Backgrounds 3 peint la couleur sous les images de fond.
Le badge de contraste dit que les couleurs échouent, mais le bouton me paraît lisible.
Le contraste se mesure sur la luminance relative, pas sur l'impression de vivacité d'une couleur. Des couples de tons moyens comme #f59e0b avec du texte blanc tombent autour de 2:1 tout en paraissant éclatants. Assombrissez le fond ou passez le libellé en quasi-noir ; le rapport se met à jour pendant que vous tapez.
Questions fréquemment posées
Écrivez une seule règle pour la classe et posez six déclarations : background-color, color, font-size, font-weight, padding et border-radius. N'ajoutez box-shadow et une bordure que si la maquette les demande. Le générateur écrit exactement cette règle pour vous : déplacez les curseurs, observez l'aperçu en direct, puis copiez le bloc .btn de l'onglet CSS dans votre feuille de style.
L'onglet CSS donne une classe .btn réutilisable et ses règles d'état à coller dans une feuille de style : tous les boutons du site changent quand vous modifiez ce bloc. L'onglet HTML + CSS donne un seul élément button avec les mêmes déclarations en ligne dans un attribut style, ce dont ont besoin les constructeurs de pages, les blocs de CMS et les modèles d'e-mail, qui suppriment les feuilles de style externes. Remplacez-le par un lien avec href quand le clic navigue.
Montez le curseur Rayon de bordure. Vers 8px vous obtenez le rectangle adouci utilisé par la plupart des interfaces, et au-delà de la moitié de la hauteur du bouton les angles fusionnent en pilule. Avec la police de 16px et le padding vertical de 12px par défaut, le bouton fait 43px de haut : tout rayon au-delà de 22 environ paraît déjà entièrement arrondi, et 999px écrit à la main veut dire la même chose.
Oui. À chaque changement de couleur de texte ou de fond, il recalcule le rapport de contraste WCAG et affiche AAA, AA ou un échec. Le texte normal demande 4,5:1 pour AA et 7:1 pour AAA ; un texte de 24px, ou de 18,66px en gras, compte comme grand et n'a besoin que de 3:1 et 4,5:1. Les dégradés sont mesurés sur leurs deux arrêts de couleur.
Le panneau de taille indique la hauteur rendue : deux fois le padding vertical, plus deux fois l'épaisseur de bordure, plus 1,2 fois la taille de police - l'interligne que le générateur fixe dans la règle, si bien que le nombre correspond au bouton dessiné juste au-dessus. Le critère 2.5.8 des WCAG 2.2 demande une cible de 24 x 24 pixels CSS et le critère 2.5.5 la porte à 44 x 44. La police de 16px avec 12px de padding vertical donne 43px, ce qui dépasse largement le minimum.
Utilisez button quand le clic agit sur la page en cours : envoyer un formulaire, ouvrir une boîte de dialogue, exécuter du JavaScript. Il est focusable par défaut, se déclenche avec Entrée et Espace et accepte l'attribut disabled. Utilisez un lien avec href quand le clic mène à une autre URL, pour que le clic du milieu et « ouvrir dans un nouvel onglet » fonctionnent encore. Les deux peuvent porter la même classe .btn.
Le CSS généré contient déjà .btn:hover et .btn:active. Laissez la case « Inclure les états focus et disabled dans le code » cochée et vous obtenez en plus .btn:focus-visible avec un contour de 3px décalé de 2px, et .btn:disabled à demi-opacité avec cursor: not-allowed. Ne supprimez jamais un contour de focus sans le remplacer par quelque chose de visible, sinon les utilisateurs au clavier perdent toute trace de leur position.
Oui. La sortie est du CSS simple, sans licence, sans obligation d'attribution et sans dépendance d'exécution, et le commentaire de crédit de la première ligne peut être effacé. Rien de ce que vous saisissez n'est envoyé ailleurs : l'aperçu, le code généré et le calcul de contraste sont faits en JavaScript dans cette page, vos couleurs et vos libellés n'atteignent donc jamais un serveur.
Les styles hérités en sont presque toujours la cause. Une réinitialisation de framework, une font-family parente, une règle button globale ou un sélecteur plus spécifique peuvent écraser la classe collée. Chargez votre feuille de style après le CSS du framework, gardez .btn sur un seul élément, et lisez le panneau Styles des outils de développement : une déclaration barrée vous dit exactement quel sélecteur l'a emporté.