# Bouton

Le bloc **Bouton** pose un appel à l’action : un libellé, une destination et, si vous le voulez, une icône de chaque côté. Cette page décrit ses trois variantes, son panneau Lien, ses icônes et ses quatre états.

## Ajouter un bouton

1. Dans l’éditeur, ouvrez l’inserteur et choisissez **Bouton principal**, **Bouton secondaire** ou **Bouton tertiaire**. [Ajouter un bloc](https://lovelyrender.com/fr/documentation/ajouter-un-bloc/) détaille les façons d’insérer un bloc.
2. Tapez le libellé. Tant que le bouton est vide, il affiche **Texte du bouton**.
3. Dans l’onglet **Réglages**, panneau **Lien**, choisissez la destination du bouton.

**Attention :** Sans lien, le bouton n’est ni cliquable ni atteignable au clavier. Ne le laissez sans destination que pour une étiquette décorative.

Écrivez ce que fait le bouton, par exemple « Demander un devis ». Une personne qui parcourt au lecteur d’écran la liste des liens de la page n’entend que ce texte.

## Choisir la variante

Les trois entrées de l’inserteur produisent le même bloc. La variante marque l’importance du bouton. Les styles enregistrés proposés au bouton dépendent d’elle.

| Variante | Usage | Style livré |
| --- | --- | --- |
| **Bouton principal** (par défaut) | L’action principale : demander un devis, acheter ou réserver. | **Primaire** |
| **Bouton secondaire** | Une action complémentaire : en savoir plus, comparer ou voir les options. | **Secondaire** |
| **Bouton tertiaire** | Une action discrète : annuler, revenir ou suivre un lien auxiliaire. | **Tertiaire** |

Pour changer la variante d’un bouton posé, sélectionnez-le, puis cliquez sur l’une des trois icônes en haut de l’inspecteur. Le nom de chaque variante s’affiche au survol. Le sélecteur de bloc, première icône de la barre d’outils, propose aussi les deux autres variantes.

Le bouton prend alors le style par défaut de sa nouvelle variante et quitte les styles enregistrés pour l’ancienne. Le libellé, le lien, les icônes et les réglages faits à la main sont gardés.

Un style enregistré depuis un bouton appartient à la variante active à ce moment. Un style créé sur un bouton secondaire n’est proposé que sur les boutons secondaires. **Définir par défaut pour**, puis **Variante**, le donne à chaque bouton de cette variante que vous poserez. [Enregistrer le style d’un bloc](https://lovelyrender.com/fr/documentation/styles-enregistres/) détaille ces gestes.

## Onglet Réglages

### Choisir la destination

1. Dans le panneau **Lien**, cliquez dans le champ **Cherchez ou collez une adresse…**. La liste propose d’abord **Page d’accueil** et l’archive de chaque type de contenu, sous l’étiquette **Gabarit**.
2. Tapez au moins deux caractères pour chercher une page, un article, une composition ou un fichier de la médiathèque. Chaque proposition porte son type.
3. Pour une autre destination, tapez son adresse et cliquez sur la proposition marquée **Adresse**, en bas de la liste.

| Vous tapez | Le bouton |
| --- | --- |
| `https://…` | Mène à un autre site. Une adresse en `http://` n’est pas proposée. |
| `mailto:contact@votresite.fr` | Ouvre la messagerie du visiteur, adresse remplie. |
| `tel:+33123456789` | Propose d’appeler ce numéro. |
| `#tarifs` | Descend jusqu’au bloc de la page qui porte l’ancre `tarifs`. |

La cible choisie devient une pastille. **Modifier** et **Retirer le lien** vident la cible : tant que vous n’en avez pas choisi une autre, le bouton est sans lien. Un lien vers un contenu du site suit ce contenu si son adresse change.

**Conseil :** Sous trois projets mis en avant, un bouton « Toutes nos réalisations » lié à l’archive du type Projets suit l’adresse de l’archive. Lié à **Page d’accueil**, un bouton mène à l’accueil dans la langue de la page lue.

### Régler le lien

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Masquer le lien aux moteurs de recherche** | Retire l’adresse en clair du code de la page. Le bouton reste cliquable et utilisable au clavier. | Désactivé |
| **Ouverture du lien** | **Dans une modale**, **Modale en bas à gauche**, **Modale en bas au centre**, **Modale en bas à droite**, **Sur le côté droit** ou **Classique (dans l’onglet du navigateur)**. | **Classique (dans l’onglet du navigateur)** |
| **Nom accessible** | Le texte annoncé par les lecteurs d’écran à la place du libellé. | Vide |
| **Nofollow** | Demande aux moteurs de recherche de ne pas suivre le lien ni de lui transmettre de valeur de référencement. | Désactivé |
| **Ouvrir dans un nouvel onglet** | Ouvre la cible dans un nouvel onglet. La page reste ouverte derrière. | Désactivé |

![Le panneau Lien d’un bouton lié à https://www.vinsdeloire.fr/ : la pastille de l’adresse avec ses boutons Modifier et Retirer le lien, puis Masquer le lien aux moteurs de recherche, Ouverture du lien, Nom accessible, Nofollow et Ouvrir dans un nouvel onglet.](https://static.lovelyrender.com/uploads/2026/10/877-doc-blocs-lien.png)

Les cinq ouvertures en surimpression affichent la cible par-dessus la page, sans la recharger. [Ouvrir une modale ou un panneau latéral](https://lovelyrender.com/fr/documentation/modales/) explique comment les mettre en forme.

**Conseil :** Un bouton « Nous contacter » réglé sur **Sur le côté droit** ouvre la page de contact en panneau latéral. Le visiteur remplit le formulaire sans quitter la page qu’il lisait. La page de contact reste une page à part entière.

### Les réglages qui se grisent

| Situation | Effet sur le panneau |
| --- | --- |
| **Ouverture du lien** n’est pas sur **Classique** | **Ouvrir dans un nouvel onglet** est décoché et grisé : une surimpression n’ouvre aucun onglet. |
| **Masquer le lien aux moteurs de recherche** est activé | **Nofollow** et **Ouvrir dans un nouvel onglet** sont décochés et grisés. |
| La cible est une composition ou un fichier de la médiathèque | **Classique** quitte la liste des ouvertures et passe à **Dans une modale**. Le lien est masqué aux moteurs et marqué **Nofollow**. |
| La cible est un `mailto:`, un `tel:` ou une ancre | **Ouverture du lien** et **Ouvrir dans un nouvel onglet** disparaissent : ces adresses s’ouvrent sur place. |
| La cible est l’accueil ou une archive | **Ouverture du lien** disparaît : ces cibles s’ouvrent comme une page. |

**Conseil :** Sur un bouton « Nous écrire » en `mailto:`, activez **Masquer le lien aux moteurs de recherche**. Les robots qui ramassent les adresses ne trouvent plus l’adresse e-mail en clair dans le code de la page. Le libellé du bouton ne doit pas l’afficher.

**Nofollow** convient à un lien sponsorisé, à un lien vers un site dont vous ne voulez pas vous porter garant et à un lien de service sans valeur éditoriale. Il ne cache pas l’adresse : seul **Masquer le lien aux moteurs de recherche** la retire du code.

## Onglet Styles

Le bouton se règle dans quatre états : **Par défaut**, **Survol**, **Focus** et **Actif**. **Focus** habille le bouton qui a le focus du clavier. **Actif** habille le bouton marqué comme actif, par exemple quand il sert d’onglet.

### Panneau Icônes

Le panneau **Icônes** se trouve sous la rangée des états. Ses onglets **Gauche** et **Droite** placent une icône de chaque côté du libellé, avec le même sélecteur que le bloc [Icône](https://lovelyrender.com/fr/documentation/bloc-icone/) : **Icônes**, **Animées** et **Personnalisées**. Le bouton **Retirer** vide un emplacement.

![Le panneau Icônes d’un bouton : les onglets Gauche et Droite, Droite ouvert, la flèche choisie sous Icône choisie, les sources Icônes, Animées et Personnalisées, puis le champ Chercher une icône.](https://static.lovelyrender.com/uploads/2026/10/878-doc-blocs-bouton-icones.png)

- Une icône se choisit par état : celle de **Survol** s’affiche quand le pointeur passe sur le bouton. Un état sans icône garde celle de **Par défaut**.
- Une icône est la même sur tous les écrans.
- Une icône animée posée sur un bouton bouge au survol. Pour un autre déclencheur, posez un bloc Icône à côté du bouton.

### Les autres panneaux

| Panneau | Guide |
| --- | --- |
| **Couleurs** | [Colorer un bloc](https://lovelyrender.com/fr/documentation/couleurs-d-un-bloc/). Le bouton est lui-même un lien : il n’a pas de couleur de lien. |
| **Typographie** | [Mettre en forme un texte](https://lovelyrender.com/fr/documentation/typographie/) |
| **Taille et espacement**, **Bordures**, **Effets**, **Transitions** | [Régler la taille, les bordures et les effets](https://lovelyrender.com/fr/documentation/taille-bordures-effets/) |

Les trois styles livrés retirent le soulignement qu’un navigateur met sous un lien. La partie **Boutons** du catalogue de design donne une allure à tous les boutons du site ([Adopter un design du catalogue](https://lovelyrender.com/fr/documentation/catalogue-de-design/)).

**Attention :** L’état **Focus** est le seul repère d’une personne qui parcourt la page au clavier. Soignez-le.

## Onglet Animations

L’onglet **Animations** fait apparaître ou bouger le bouton. [Animer un bloc](https://lovelyrender.com/fr/documentation/animations/) décrit les effets.

## Placer un bouton

Un bouton se pose seul ou dans un autre bloc : un [Conteneur](https://lovelyrender.com/fr/documentation/bloc-conteneur/), une cellule de tableau, un panneau d’onglet, une navigation ou la carte d’une liste. Pour une rangée de boutons, rangez-les dans un Conteneur en **Flex** et réglez l’écart sur le conteneur.

La diapositive d’un diaporama n’accepte qu’un paragraphe ou un titre. Pour poser un bouton sur une image, mettez l’image en arrière-plan d’un Conteneur et placez le bouton dedans.

## Accessibilité

- Un bouton qui n’affiche qu’une icône a besoin d’un **Nom accessible**. Laissez ce champ vide dès que le bouton porte un libellé visible.
- Les icônes d’un bouton sont décoratives : les lecteurs d’écran ne les annoncent pas.
- Quand **Ouvrir dans un nouvel onglet** est coché, les lecteurs d’écran annoncent « s’ouvre dans un nouvel onglet ». N’écrivez pas « nouvelle fenêtre » dans le libellé.

Le panneau **Accessibilité** de l’éditeur signale en erreur un bouton sans texte visible ni nom accessible : **Bouton sans texte visible ni nom accessible. Remplissez « Nom accessible » dans le panneau Lien.** [Vérifier l’accessibilité de vos pages](https://lovelyrender.com/fr/documentation/accessibilite/) décrit le panneau.

## Limites

- Le bouton n’a pas d’ancre HTML : pour viser un bouton, posez l’ancre sur le conteneur qui l’entoure.
- Une ancre seule, `#tarifs`, vise la page où le bouton s’affiche. Posé dans un gabarit ou une composition, il mène à `#tarifs` sur chaque page qui porte un bloc avec cette ancre.

## Voir aussi

- [Conteneur](https://lovelyrender.com/fr/documentation/bloc-conteneur/)
- [Icône](https://lovelyrender.com/fr/documentation/bloc-icone/)
- [Ouvrir une modale ou un panneau latéral](https://lovelyrender.com/fr/documentation/modales/)
- [Enregistrer le style d’un bloc](https://lovelyrender.com/fr/documentation/styles-enregistres/)