BOUTON CSS

Générateur de boutons CSS stylisés

Créez un bouton web avec votre style, copiez le CSS, HTML ou sauvegardez le style. L'aperçu se met à jour immédiatement. Pour récupérer votre style :
  • Option 1 : Clic droit → Inspecter dans votre navigateur.
  • Option 2 : Copier le CSS généré ci-dessous.
Aperçu :
👍 BOUTON CSS
Vide = auto.
Texte affiché dans le bouton (max 50 caractères).
Alternative accessible si le texte n’est pas explicite.
Taille en pixels.
Police système safe.
Ex: 1 pour espacer, -1 pour rapprocher.
Type de curseur affiché au survol.
Fond dégradé, contour ou relief.
Couleur principale
Couleur secondaire
Couleur du texte
Hex (ex: #ff9900 ou shorthand #f90).
Ex: ✓, →, +
Position de l’icône
border-radius en pixels.
Haut/bas en px.
Gauche/droite en px.
Profondeur visuelle.
Type de bordure (si épaisseur>0).
Épaisseur en px.
Hex pour la bordure (ex: #ff9900 ou shorthand #f90).
Ex: 0.9 pour léger fondu.
Durée des effets.
Ex: 1.03 = léger agrandissement.
Effet de pression.
Aperçu :
👍 BOUTON CSS
WCAG - Web Content Accessibility Guidelines (Règles pour l’accessibilité des contenus web)
Le contraste WCAG s’assure que votre texte est lisible, peu importe la vue ou l’écran. C’est un ratio entre la couleur du texte et la couleur du fond de votre bouton.
Type de contenuRatio minimumNiveau WCAG 2.1
Texte normal (par défaut) 4.5:1 AA
Texte large (≥ 18pt ou 14pt en gras)3:1 AA
Pour un niveau AAA (plus strict)7:1 (texte normal) AAA
Niveau WCAG bouton :Contraste…
Code CSS dynamique :

            

            
Colle ce bloc dans ta feuille de style. Tu peux renommer .btn-styled.

          

          

            
Code HTML :

            
<a href="#" class="btn-styled"><?= htmlspecialchars($label) ?>

            
Copie ce bloc pour intégrer le bouton.

          

        

        

          
Export JSON du style :

          
          
Sauvegarde / réimporte ce style.

        

      

    


    
  






  
    Retour  





  
    Accueil