Créer un bouton

Ce guide vous explique pas à pas comment créer un bouton à partir de zéro. Si vous souhaitez à l'inverse réutiliser un bouton déjà présent sur votre site, dupliquez un composant en utilisant l'onglet reusable.

Pour créer un bouton, vous avez deux solutions :

• Utiliser l'élément bouton : plus simple, mais design moins facilement modifiable
• Utiliser un lien URL : plus complexe, mais plus de liberté

Basique : Avec l'élément bouton

• Insérez un élement button
  • Si vous ne savez pas comment faire, consultez le guide dédié.
  • Onglet basics - links
• Renommez votre bouton
  • Sélectionnez l'élément, puis consultez le panneau d'édition à gauche

Voici les options pour modifier votre bouton :

• URL : Lien URL du bouton
  • Si votre lien est dans la même page, consultez le guide dédié aux URL
• Button Style : aspect du bouton
• Button size : taille du bouton
  • Plus précisément, augmente ou diminue le padding
• Button color : couleur du bouton
• Button hover color : modifie la couleur du bouton lorsque l'on passe la souris dessus.
• Text color : couleur du texte
• Text size : taille du texte
• font family : police d'écriture
  • Inherit = copie la police des textes définie dans les paramètres de style
• Font weight : graisse du texte

N'hésitez pas à employer une classe si vous avez plusieurs boutons à insérer, afin de pouvoir modifier vos paramètres plus rapidement en cas de besoin.

Avancé : Avec un lien

• Insérez une div et sélectionnez-la
  • Si vous ne savez pas comment faire, consultez le guide dédié.
• Insérez un élément de texte
• Sélectionnez à nouveau la div et transformez-là en URL
  • Si vous ne savez pas comment faire, consultez le guide dédié.
• Renommez votre lien avec le champ text content
  • Sélectionnez l'élément, puis consultez le panneau d'édition à gauche

Vous avez maintenant un lien cliquable.

Ici, la div sera le conteneur de votre bouton, et le texte le contenu. Avant de continuer, n'hésitez pas à ajouter une classe à la div ET une classe au texte, afin de pouvoir effectuer des modificatiosn plus rapidement.

• Modifier la largeur / hauteur du bouton : Utilisez l'onglet Size & spacing de la div.

• Modifier le texte : utiliser l'onglet Typography de l'élément texte

• Modifier la couleur du bouton : Utiliser l'onglet Background de la div

• Modifier la couleur lors du survol du bouton : Toujours en gardant la div sélectionnée, cliquez sur le bouton state à gauche de l'id (étiquette bleue), puis cliquez sur hover. Faites ensuite la même chose qu'à l'étape précédente.
  • Hover signifie "quand l'élément est survolé par la souris"

Important : N'oubliez pas de revenir sur state une fois la modification effectuée en cliquant à nouveau sur le même bouton et en sélectionnant original.

• (facultatif) Ajoutez une bordure : Toujours avec la div sélectionnée, cliquez sur l'onglet Borders et éditez les bordures
  • Pour en savoir plus, consultez le Guide dédié
  • Vous pouvez mixer cet élément avec un Hover si vous souhaitez que des bordures apparaissent, disparaissent ou s'agrandissent quand l'utilisateur passe dessus.

• (facultatif) Ajoutez une transition : Ajoutons un peu de vie au bouton. Toujours avec la div sélectionnée, cliquez sur l'onglet Effects (celui avec une baguette magique). cliquez ensuite sur l'onglet transition
  • Transition duration : mettez une durée comprise entre 0.2 et 0.5 seconde
  • Timing function : ease-in-out
  • Css property : all

Ici, nous faisons en sorte que lorsque que l'utilisateur passe la souris sur le bouton, la couleur change progressivement du bleu au rouge. Plus la transition duration est courte, plus la couleur changera rapidement.

Vous avez maintenant un bouton opérationnel !