--- title: "Élément Bouton : ajouter un bouton cliquable" description: "Ajoutez un bouton cliquable qui ouvre un lien ou déclenche une action, et modifiez son texte directement sur la canvas avec l'éditeur enrichi." url: https://docs.vivlab.com/editor/menu/button --- # Bouton L'élément **Bouton** est un bouton cliquable qui déclenche une action ou ouvre un lien. Son texte se modifie directement sur la canvas avec l'éditeur enrichi (double-clic). ## Action lors du clic Le panneau latéral propose un sélecteur **Action lors du clic** qui détermine ce qui se passe quand le visiteur clique sur le bouton. Choisissez parmi : - **Aucune action** : le bouton ne déclenche rien (utile pour un bouton purement décoratif). - **Lien externe à ouvrir** : saisissez une URL complète (par exemple `https://example.com`). Les liens externes s'ouvrent dans un nouvel onglet. Pour ouvrir un [pop-up](https://docs.vivlab.com/editor/menu/popup.md) au lieu de changer de page, collez-y la cible `popup:…` affichée dans son panneau. - **Adresse email** : ouvre la messagerie du visiteur pour vous écrire. - **Numéro de téléphone** : déclenche l'appel sur mobile (par exemple `+33612345678`). - **Ancre** : pointe vers une section précise de la page courante. - **Blog et articles de blogs** : associe une page de blog ou un article comme cible du lien. - **Page du site** : pointe vers une autre page de votre site. - **Boutique et catégorie e-commerce** : associe la boutique ou une [catégorie](https://docs.vivlab.com/sections/collections.md) comme cible. - **Produit e-commerce** : associe un [produit](https://docs.vivlab.com/sections/products.md) précis. - **Page de rétractation** : renvoie vos clients vers le [formulaire de rétractation](https://docs.vivlab.com/sections/returns.md) en ligne. - **Compte client** : renvoie vos clients vers leur [espace personnel](https://docs.vivlab.com/sections/customer-accounts.md). - **Document .pdf** : ouvre un PDF dans une visionneuse, sans quitter la page. - **Fichier .html** : affiche un fichier HTML autonome (présentation, animation, page interactive) par-dessus la page courante. Le visiteur peut aussi l'ouvrir dans un nouvel onglet. Selon le type d'action choisi, un champ supplémentaire apparaît pour préciser la cible (URL, page, produit, etc.). Pour les actions **Document .pdf** et **Fichier .html**, chargez un fichier ou choisissez-en un déjà importé depuis l'onglet **Mes fichiers** : le même document peut ainsi servir à plusieurs boutons sans être rechargé. ## Style du bouton Le [panneau de style](https://docs.vivlab.com/editor/style/index.md) regroupe : - Le [style du texte](https://docs.vivlab.com/editor/style/text.md) du libellé : police, taille, couleur, casse, épaisseur, alignement. - La rubrique **Icône** : ajoutez une icône avant, après, au-dessus ou sous le libellé, puis réglez l'espace avec le texte, sa couleur et éventuellement un fond (avec arrondi et marge). - L'[arrière-plan](https://docs.vivlab.com/editor/style/background.md), les [bordures](https://docs.vivlab.com/editor/style/border.md), l'[arrondi des angles](https://docs.vivlab.com/editor/style/border-radius.md), l'[ombre](https://docs.vivlab.com/editor/style/box-shadow.md) et les [marges intérieures](https://docs.vivlab.com/editor/style/padding.md). - L'[alignement vertical](https://docs.vivlab.com/editor/style/align.md) du contenu et les [transitions](https://docs.vivlab.com/editor/style/transition.md). La forme par défaut des boutons (carrée, légèrement arrondie, tout arrondi) est définie globalement dans la page [Thèmes](https://docs.vivlab.com/sections/themes-brands.md). Les réglages effectués ici **surchargent** la valeur du thème pour ce bouton uniquement.