15. Boutons, liens et appels à l’action

Un site vitrine n’a qu’un but : que le visiteur fasse quelque chose — appeler, demander un devis, venir à l’atelier. Ce quelque chose passe presque toujours par un bouton. Ce chapitre montre comment construire un bouton avec l’élément atomique, où le faire pointer (page, ancre, e-mail, téléphone), comment le rendre accessible, et comment distinguer un bouton principal d’un bouton secondaire. Il vient après le texte et l’image parce qu’un bouton n’est, au fond, qu’un texte posé sur un fond, avec un lien.

15.1 — L’appel à l’action : la phrase qui fait agir

Pour un artisan, les appels à l’action utiles se comptent sur les doigts d’une main : demander un devis (le principal), appeler, voir les réalisations, venir à l’atelier (itinéraire), écrire un e-mail. Chaque écran de chaque page devrait en porter un, et un seul, qui domine : le bouton principal. Les autres, s’il y en a, sont des boutons secondaires, visuellement plus discrets. Deux boutons de même poids côte à côte se neutralisent : le visiteur hésite, puis ne clique sur aucun.

Le texte du bouton dit ce qui va se passer : un verbe d’action et un objet. « Demander un devis » annonce un formulaire ; « Cliquez ici » ou « En savoir plus » n’annoncent rien, et un lecteur d’écran qui liste les boutons de la page n’en tirera que du bruit. Court, concret, à l’infinitif ou à l’impératif : deux à quatre mots.

15.2 — L’élément Bouton

Le Bouton (Button) atomique se trouve dans la catégorie Éléments atomiques du panneau. Son onglet Général tient en trois champs : le Texte du bouton, le Lien (avec l’option d’ouverture dans un nouvel onglet) et un ID. Comme le Titre, il s’édite aussi directement sur la toile par double-clic. Tout le reste — couleurs, forme, taille — se règle dans l’onglet Style, dont les sections sont celles de tous les atomes. Le schéma ci-dessous nomme les parties d’un bouton et les réglages qui les commandent.

Le style, section par section

Typographie : la police du texte courant (Source Sans 3), 16 ou 17 px, graisse 600, sans transformation — les capitales rendent un libellé long difficile à lire. Espacement : la marge interne (padding, chapitre 10) fait la taille du bouton ; 14 px en haut et en bas, 28 px à gauche et à droite donnent un bouton d’environ 48 px de haut, confortable au pouce. Arrière-plan : la couleur de fond, bois chaud #A8663C pour le bouton principal. Bordure : le Rayon arrondit les coins — 8 px pour un bouton sobre, une valeur énorme comme 999 px pour une « pilule » parfaitement ronde aux extrémités ; la bordure elle-même (2 px, couleur bois) sert au bouton secondaire, dont le fond reste transparent. Effets : une ombre légère détache le bouton du fond ; c’est aussi là que se règle la transition qui adoucit le changement de couleur au survol (chapitre 17). Taille : par défaut le bouton prend la largeur de son texte ; sur mobile, une largeur de 100 % le rend impossible à manquer.

1. Sélectionnez le Bouton « Demander un devis » du bandeau d’accueil (chapitre 07). Dans Général, saisissez le lien /contact/.
2. Style › Typographie : Source Sans 3, 17 px, graisse 600, couleur blanc cassé #FAF7F2.
3. Style › Espacement : marge interne 14 px en haut et en bas, 28 px à gauche et à droite (déliez les côtés si nécessaire).
4. Style › Arrière-plan : couleur #A8663C. Style › Bordure : rayon 8 px sur les quatre coins.
5. Vue Mobile (Ctrl+Shift+M, Cmd sur Mac) : Style › Taille, largeur 100 %. Enregistrez avec Ctrl+S.

15.3 — Les états : survol, focus, actif

Un bouton n’a pas qu’une apparence : il en a quatre. Normal, au repos. Au survol (hover), quand la souris passe dessus : il doit changer, ne serait-ce qu’un peu, pour dire « je suis cliquable ». Focus, quand il est atteint au clavier par la touche Tabulation : la personne qui ne peut pas utiliser de souris doit voir où elle en est. Actif (active), l’instant du clic. Le téléphone ne connaît pas le survol ; le focus et l’actif y existent.

Dans l’Éditeur atomique, les états s’ajoutent sur une classe : dans l’onglet Style, la classe locale de l’élément (celle qui porte ses réglages, affichée en rose) a un menu à trois points d’où l’on choisit Au survol, Focus ou Actif ; le panneau bascule alors sur cet état, et tout réglage fait ensuite ne s’applique qu’à lui. Pour le bouton principal : au survol, fond anthracite #2B2B2B ; au focus, la même chose plus une bordure visible. Le chapitre 18 transformera cette classe locale en classe globale « btn-primaire » pour que tous les boutons du site partagent ces états ; pour l’instant, réglez-les sur le bouton du bandeau, vous les recopierez.

15.4 — Les liens : où mène le bouton

Le champ Lien accepte bien plus qu’une adresse de page. Voici les formes utiles à un site d’artisan, et la façon de les écrire.

Poser une ancre

Une ancre est un point de la page vers lequel un lien peut faire défiler. Il faut deux choses : un élément cible portant un ID, et un lien qui commence par # suivi de cet ID. Sur un élément atomique (Titre, Bouton, SVG), le champ ID est dans l’onglet Général ; sur un widget classique, il s’appelle ID CSS dans l’onglet Avancé. Un ID s’écrit sans espace, sans accent, sans #, et n’existe qu’une fois par page : devis, realisations, contact. Quand aucun élément ne convient comme cible, le widget classique Ancre de menu (Menu Anchor), un point invisible que l’on dépose juste au-dessus de la section visée, fait l’affaire (chapitre 16).

15.5 — Accessibilité et bonnes pratiques

Un bouton accessible est d’abord un bouton visible. Contraste : le texte du bouton suit la même règle que tout texte, 4,5:1 au minimum. Du blanc cassé sur le bois chaud #A8663C atteint tout juste ce seuil ; gardez une graisse de 600 et une taille d’au moins 16 px pour rester du bon côté. De l’anthracite sur le bois chaud, en revanche, ne passe pas (environ 3:1). Taille de cible : un doigt a besoin d’une zone d’au moins 44 px de haut — la marge interne de 14 px avec un texte de 17 px y arrive — et de 8 à 16 px d’écart entre deux boutons voisins (le réglage Écart du Flexbox parent). Focus visible : réglé en 15.3. Texte explicite : « Demander un devis », pas « Cliquez ici ». Un bouton est un bouton : ne fabriquez pas de faux boutons avec un Bloc Div coloré et un lien ; l’élément Bouton produit le bon code, que les lecteurs d’écran annoncent comme tel.

Enfin, la cohérence : tous les boutons principaux du site ont la même forme, la même couleur, le même comportement au survol. Sur cinq pages, on y arrive à la main ; le chapitre 18 montre comment l’imposer une fois pour toutes avec une classe globale.

Un bouton que l’on ne peut ni voir, ni toucher, ni comprendre n’est pas un bouton : c’est une décoration.

15.6 — Le Bouton classique et la Liste d’icône

Deux widgets classiques complètent l’élément atomique. Le Bouton classique (catégorie Basique, trois onglets) offre ce que l’atome n’a pas encore : une Icône intégrée, placée avant ou après le texte, avec son espacement ; des tailles prédéfinies ; un Alignement dans son conteneur ; et une animation au survol. Sa couleur de départ vient de Réglages du site › Styles du thème › Boutons (chapitre 19). Prenez-le quand le bouton doit porter une icône — un combiné téléphonique devant « Appeler l’atelier », par exemple.

La Liste d’icône (Icon List) est le widget des blocs de coordonnées : une liste d’éléments composés chacun d’une icône, d’un texte et d’un lien. Trois lignes — téléphone en tel:, e-mail en mailto:, adresse avec un lien vers l’itinéraire — et le pied de page ou la page Contact ont leur bloc de contact, cliquable ligne par ligne. La Disposition se règle en vertical (par défaut) ou en ligne ; le style permet d’ajuster l’espace entre les éléments, un séparateur, la couleur et la taille des icônes. Le chapitre 16 en donne les réglages complets.