Générateur de boutons CSS
Créez un bouton et examinez ses états par défaut, survol, focus clavier, appui, désactivé et chargement. Réglez un fond uni ou dégradé, la bordure, les espacements, les angles, l’ombre et les couleurs d’état. Le libellé est échappé, la création reste dans le navigateur et la sortie contient un HTML sémantique et un CSS aux valeurs bornées.
Comment générer un bouton CSS
-
1
Écrire le libellé
Saisissez du texte brut; le contenu ressemblant à du HTML reste du texte.
-
2
Définir le style de base
Choisissez fond, couleurs, taille, marges intérieures, rayon, bordure et ombre.
-
3
Régler les états
Définissez survol, appui et focus; désactivé et chargement sont inclus.
-
4
Vérifier les indications
Contrôlez le contraste du texte et du focus ainsi que la cible minimale.
-
5
Copier ou télécharger
Copiez le HTML et le CSS ou téléchargez une page HTML UTF-8 autonome.
États inclus
Le HTML emploie un vrai <button type="button">. Le CSS couvre l’état par défaut, le survol, le focus clavier avec :focus-visible, l’appui, la propriété disabled et le chargement avec aria-busy="true". Votre application décide quand appliquer ces états et quelle action exécuter.
Contraste et taille
Le calcul retient le contraste le plus faible entre le texte et les fonds de base, de fin du dégradé, de survol et d’appui. Les objectifs affichés sont 4,5:1 pour le texte courant et 3:1 pour le contour de focus sur la surface claire. Vérifiez de nouveau le composant dans sa page réelle.
Le CSS impose une cible de 44 par 44 px. Les déplacements disparaissent si l’utilisateur demande moins de mouvement; l’indicateur de chargement ralentit.
Limites sûres et confidentialité
Le libellé est normalisé, limité à 120 graphèmes et échappé. Les couleurs sont des valeurs hexadécimales à six chiffres et les nombres sont bornés. L’éditeur complet reste en mémoire; le parcours en quatre étapes utilise sessionStorage dans l’onglet. Rien n’est placé dans l’URL ni envoyé par Livewire.
<button type="button" class="generated-button" aria-busy="true" disabled>
<span class="generated-button__label">Enregistrement</span>
</button>
Retirez les deux attributs à la fin et annoncez les résultats importants dans une région de statut adaptée.
Questions fréquentes
Non. Il fournit des contrôles utiles, mais la conformité dépend de la page finale et de ses essais.
Non. Le libellé et le style restent dans le navigateur; le parcours utilise seulement le stockage de session du même onglet.
Un bouton convient aux actions. Pour naviguer, utilisez un lien doté d’un vrai href et adaptez la classe visuelle.
La sortie est sélectionnée pour une copie manuelle et aucun faux message de réussite n’est affiché.
Outils similaires
Générateur de lettres aléatoires
Générez des lettres A-Z aléatoires. Choisissez le nombre, les majuscules, les minuscules ou le mélange, puis utilisez le résultat pour des jeux ou la classe.
Convertisseur binaire en ASCII
Collez du binaire (octets séparés par des espaces ou un long flux de bits) et obtenez le texte ASCII qu'il représente. Gère les encodages de 7 bits et 8 bits.
Convertisseur BBCode en HTML
Convertissez le BBCode (balisage de forum) en HTML propre. Gère les balises de formatage, les listes, les citations, le code, les images, les liens et les tableaux.
Convertisseur binaire en octal
Convertissez le binaire en octal en regroupant les bits trois par trois. Utile pour les permissions Unix, les systèmes hérités et l'affichage numérique compact.
Convertisseur Base64 en Hex
Convertissez une chaîne Base64 en ses octets sous-jacents exprimés en hexadécimal. Utile pour inspecter des jetons, des clés, des certificats et des JWT.
Sélecteur de couleur HEX
Choisissez ou saisissez une couleur HEX et obtenez RGB, HSL, CMYK estimé, luminance relative et contraste sur blanc et noir.