Cet exemple utilise uniquement les contrôles du générateur. Les images ci-dessus montrent des feuilles de style réellement téléchargées appliquées à des boutons HTML ordinaires, et non des captures d'écran de l'éditeur.
Ouvrir le générateur de boutons CSS
Commencer avec Signature
Ouvrez le générateur de boutons CSS. Dans Préréglages, choisissez Signature dans la collection Everyday. Définissez le texte du bouton sur « Get started ». Dans la zone de code, définissez le nom de la classe sur cta-button.
Un préréglage remplace les styles par défaut et de survol, tandis que votre étiquette et votre nom de classe restent inchangés. Choisissez votre point de départ avant d'effectuer des ajustements détaillés.
Le nom de la classe connecte les règles CSS à votre bouton HTML. Le générateur nettoie les caractères non pris en charge ; utilisez un nom court et distinctif pour éviter de styliser des éléments non liés.
Créer la pilule à dégradé
Gardez l'état d'édition sur Par défaut. Dans Texte, choisissez System sans, Taille de police 18 px et Graisse Gras. Gardez la couleur de texte blanche, le style normal, l'alignement centré et la hauteur de ligne 1.4.
Dans Remplissage, sélectionnez Dégradé linéaire. Utilisez les deux couleurs et l'angle ci-dessous. Définissez le remplissage horizontal sur 32 px et le remplissage vertical sur 16 px. Dans Forme, gardez Lier tous les coins activé et définissez le rayon de coin sur 100 px. La largeur de bordure reste 0 px.
Dans Ombre, gardez Ombre portée activée. Utilisez un décalage horizontal de 0 px, un décalage vertical de 8 px, un flou de 24 px, une propagation de −4 px, une couleur #460BD8 et une opacité de 32%. Laissez l'ombre interne et l'ombre du texte désactivées.
Le remplissage modifie l'espace autour du texte. Le rayon de coin modifie le contour. Un grand rayon crée cette forme de pilule sans élargir l'étiquette.
Donner au survol son propre traitement
Passez l'état d'édition à Survol. Dans Remplissage, changez la couleur d'arrière-plan en #33099E et la seconde couleur en #6D20BF. Gardez l'angle du dégradé à 135°. Dans Ombre, changez le décalage vertical en 10 px et le flou en 28 px. Laissez les autres paramètres inchangés.
Utilisez les boutons Par défaut, Survol et Actif du canevas pour inspecter chaque état. Vous pouvez également survoler ou appuyer sur le bouton de prévisualisation. Changez le canevas entre clair et sombre pour examiner ses bords et son ombre.
L'état d'édition choisit les styles que vous modifiez. L'état du canevas change uniquement ce que vous prévisualisez. Revenez à l'édition Par défaut avant d'ajuster l'apparence au repos.
Les propriétés de survol qui correspondent toujours à celles par défaut suivent les modifications par défaut ultérieures. Une fois que vous personnalisez une propriété de survol, elle reste indépendante. Revérifiez les deux états après avoir modifié le style de base.
Exporter et tester dans votre page
Sélectionnez l'onglet CSS et utilisez Copier CSS, ou choisissez Télécharger pour enregistrer cta-button.css. Sélectionnez l'onglet HTML et copiez le balisage de bouton correspondant. Le HTML inclut le même nom de classe et un bouton avec type="button".
Ajoutez le CSS à votre feuille de style, ou liez le fichier téléchargé depuis votre page. Placez le HTML là où le bouton doit se trouver. Les deux exportations fonctionnent ensemble : un bouton HTML seul n'inclut pas son style.
Ouvrez la page et testez ses états par défaut, survol, focus clavier et pressé. L'exportation inclut un contour focus-visible, un léger mouvement actif et une règle de réduction de mouvement. Vos styles environnants et les polices installées peuvent toujours affecter le résultat.
Le bouton généré est un contrôle stylisé. Connectez son comportement de clic dans votre projet ; utilisez le type de bouton correct lors de son ajout à un formulaire.
cta-button.css
Le nom de fichier téléchargé suit le nom de la classe.
Questions fréquentes
Ai-je besoin d'un framework CSS ?
Non. Le résultat est du CSS standard plus un bouton HTML simple. Collez le CSS dans votre propre feuille de style et utilisez la classe correspondante sur le bouton.
Le téléchargement enregistre-t-il aussi le HTML ?
Le téléchargement enregistre un fichier .css nommé d'après la classe. Copiez le balisage du bouton séparément depuis l'onglet HTML.
Puis-je donner à chaque coin un rayon différent ?
Oui. Dans Forme, désactivez Lier tous les coins, puis définissez Haut gauche, Haut droit, Bas droit et Bas gauche indépendamment. Cet exemple les garde liés pour une forme de pilule.
Mon design sera-t-il encore là la prochaine fois ?
Le studio tente d'enregistrer le brouillon actuel dans le stockage local de ce navigateur. Il ne s'agit pas d'un compte ou d'une sauvegarde inter-appareils. Les paramètres du navigateur, la suppression des données du site ou la réinitialisation peuvent le supprimer ou le remplacer, alors exportez le travail que vous souhaitez conserver.
Mon bouton est-il envoyé sur un serveur ?
L'aperçu du style et la génération de CSS/HTML s'exécutent dans votre navigateur. L'éditeur ne télécharge pas le texte de votre bouton ou votre brouillon de style pour créer l'exportation.
Donnez à votre prochain bouton son propre style.
Choisissez un point de départ, ajustez les détails et intégrez le code dans votre projet.