Personnalisez visuellement un bouton et obtenez le HTML et le CSS pour l'utiliser sur votre site web. Commencez par un préréglage, ajustez la typographie, les couleurs, la forme et les ombres, puis prévisualisez les états d'interaction avant l'exportation.
Parcourez les préréglages 44 parmi les collections Everyday, Classic, Shaped, Expressive, Gradients et Elite. Chaque préréglage est un point de départ que vous pouvez modifier.
Comment les préréglages affectent votre design
Choisissez d'abord, puis affinez
Utilisez la collection Style pour restreindre la galerie. L'application d'un préréglage remplace les styles par défaut et au survol, tout en conservant le texte et le nom de classe de votre bouton.
Essayez un remplissage plein simple, un coin arrondi, un contour net ou un traitement plus décoratif. Une fois que vous avez trouvé une direction, utilisez les autres onglets pour adapter les détails à votre page.
Rendez l'étiquette cohérente
Définissez le texte du bouton, la famille de polices, la taille, l'épaisseur, l'espacement, la hauteur de ligne, l'alignement et la couleur du texte. Voyez l'étiquette se mettre à jour au fur et à mesure de votre travail.
Affinez le texte et l'espacement
Une typographie adaptée à l'action
Le texte contient les contrôles de police et un second champ de texte pour le bouton. La taille de la police varie de 10 à 80 px ; les familles listées utilisent les polices disponibles sur l'appareil du visiteur.
Utilisez une étiquette courte qui décrit l'action. Dans Remplissage, le remplissage horizontal et vertical ajoute de l'espace autour sans changer la taille de la police. Vérifiez les étiquettes plus longues sur la page où le bouton sera utilisé.
Choisissez un remplissage uni ou dégradé
Utilisez une couleur d'arrière-plan ou mélangez deux couleurs avec un dégradé linéaire. Les sélecteurs de couleur et les entrées hexadécimales vous permettent de travailler visuellement ou avec précision.
Définissez les couleurs et la direction du dégradé
Deux couleurs, une direction claire
Dans Remplissage, changez le style de remplissage en Dégradé linéaire pour révéler la Seconde couleur et l'Angle du dégradé. L'angle varie de 0 à 360 degrés.
Les champs hexadécimaux acceptent une couleur complète à six chiffres ou un raccourci à trois chiffres. Testez l'étiquette blanche ou colorée sur les deux extrémités d'un dégradé ; le studio ne certifie pas automatiquement le contraste du texte.
Contrôlez le contour et la profondeur
Ajustez les coins liés ou indépendants, la largeur et le style de bordure, les ombres portées et les ombres de texte. Donnez au bouton une forme adaptée à son contexte.
Explorez les coins, les bordures et les ombres
D'un rectangle net à une forme arrondie douce
Dans Forme, gardez Lier tous les coins activé pour un rayon partagé, ou désactivez-le pour définir chaque coin. Les styles de bordure incluent plein, tirets, pointillés, double, encastré, en relief, crête, rainure et aucun.
Dans Ombre, définissez les décalages horizontal et vertical, le flou, la couleur et l'opacité. L'ombre portée dispose également d'une option d'étalement et d'un commutateur interne. L'ombre du texte est séparée, vous pouvez donc ajouter de la profondeur à l'étiquette sans changer le contour du bouton.
Concevez également l'interaction
Modifiez séparément les styles Par défaut et Survol. Prévisualisez les apparences Par défaut, Survol et Actif, puis comparez le bouton sur des toiles claires et sombres.
Comprendre les états d'édition et de prévisualisation
Deux styles modifiables, trois états de prévisualisation
L'état d'édition choisit quel style vos contrôles modifient. Les boutons d'état de la toile choisissent uniquement la prévisualisation. Survoler ou appuyer sur la prévisualisation montre également son interaction.
Les valeurs de survol qui correspondent toujours à celles par défaut suivent les modifications de base jusqu'à ce qu'elles soient personnalisées. Le CSS exporté inclut une règle de survol si nécessaire, un contour focus-visible, un mouvement actif et une règle de réduction de mouvement.
Intégrez le CSS dans votre projet
Copiez le CSS généré et le bouton HTML correspondant, ou téléchargez une feuille de style. Un nom de classe maintient les deux éléments connectés.
Copiez, téléchargez et conservez votre travail
Code simple que vous pouvez utiliser directement
Choisissez un nom de classe distinctif, copiez CSS depuis son onglet, puis copiez le bouton depuis HTML. Le téléchargement enregistre un fichier .css nommé d'après la classe ; il ne télécharge pas une page web complète.
La prévisualisation et la génération de code s'exécutent dans votre navigateur. Le studio essaie de mémoriser un brouillon dans le stockage local de ce navigateur ; exportez tout ce que vous souhaitez conserver. Réinitialiser ramène le studio à son style de départ.
Texte et styles en entrée. HTML et CSS en sortie.
Aucun téléchargement n'est nécessaire. JavaScript alimente l'éditeur en direct dans votre navigateur. Copiez le HTML et le CSS séparément, ou téléchargez la feuille de style CSS. La pile de polices générée utilise les polices disponibles sur l'appareil du spectateur.
