Générateur de bouton CSS
Partez d’un style prêt à l’emploi et réglez la couleur, la taille, les coins et l’ombre. Survolez et cliquez dans l’aperçu pour voir les effets, puis copiez le code.
Mode d’emploiDe beaux boutons en CSS
Disponible en: 
Générateur de bouton CSS: à quoi ça sert
Choisissez un style prêt à l’emploi (plein, pilule, contour, dégradé ou carré) et réglez le texte, les couleurs, la taille de la police, l’espacement, les coins, l’ombre, la graisse de la police et l’effet au survol (monter, assombrir ou agrandir). L’aperçu fonctionne vraiment : survolez et cliquez.
Le CSS inclut un focus visible pour le clavier, un effet de survol uniquement sur les appareils avec souris et une légère réduction au clic. L’outil affiche le contraste entre le texte et le fond et vous avertit lorsqu’il passe sous 4,5:1.
Mode d’emploi
- Choisissez un style prêt à l’emploi.
- Réglez les couleurs, la taille, les coins, l’ombre et l’effet.
- Vérifiez le contraste et copiez le CSS et le HTML.
Quand l’utiliser
- Boutons d’appel à l’action sur des landing pages.
- Uniformiser les boutons d’un site.
- Apprendre le CSS en voyant le résultat.
Questions fréquentes
Le bouton est-il accessible ?
Le code utilise la balise button (ou a), garde le contour de focus visible avec :focus-visible et l’outil vous avertit lorsque le contraste entre le texte et le fond passe sous 4,5:1, le minimum WCAG pour du texte normal.
Pourquoi l’effet de survol n’apparaît-il que sur ordinateur ?
Le survol est placé dans @media (hover: hover), car sur mobile le toucher déclenche un faux survol qui reste bloqué sur le bouton. L’effet de clic (:active) fonctionne sur tous les appareils.
Puis-je utiliser le code sur un lien ?
Oui. Remplacez <button> par <a href="..."> et conservez la classe ; le CSS inclut déjà display:inline-flex et text-decoration:none pour les deux cas.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.