Bouton call to action : exemples et bonnes pratiques pour un site vitrine

Un bouton call to action qui fonctionne transforme une visite en appel ou en demande de devis. Sur un site vitrine de TPE, le problème est rarement l'absence de bouton : c'est un bouton « Envoyer » ou « Nous contacter » qui ne promet rien, placé trop bas ou trop petit sur téléphone.

Ce guide vous donne des exemples de libellés pensés pour les métiers de service, les règles de placement, les seuils de taille et de contraste fixés par le W3C, et une méthode simple pour tester vos boutons avant de toucher au design.

Qu'est-ce qu'un bouton call to action efficace ?

Un bouton call to action, ou CTA, est un élément cliquable qui invite le visiteur à faire une action précise : appeler, demander un devis, réserver. Il est efficace quand le visiteur sait, avant de cliquer, ce qu'il va obtenir et ce que cela lui coûte.

L'Office québécois de la langue française recommande le terme « bouton d'appel à l'action » plutôt que l'anglicisme. Les deux désignent la même chose : nous employons ici les deux pour que vous les reconnaissiez dans vos outils.

Bouton ou lien texte : lequel utiliser ?

Utilisez un bouton pour l'action principale de la page et un lien texte pour les actions secondaires. Le bouton signale au regard « c'est ici que ça se passe » ; le lien texte, glissé dans un paragraphe, accompagne le lecteur sans le presser.

Une page qui affiche cinq boutons de même poids n'a plus d'action principale. Le visiteur hésite entre les options, puis repart sans en choisir aucune.

Le test des 3 questions avant le clic (méthode fsweb)

Le test des 3 questions est une méthode fsweb pour vérifier un CTA en dix secondes : en lisant le bouton et la ligne qui l'accompagne, le visiteur doit pouvoir répondre à trois questions.

1. Qu'est-ce que j'obtiens ? Un devis chiffré, un rappel, un créneau.
2. Combien ça m'engage ? Gratuit, sans engagement, deux minutes.
3. Que se passe-t-il ensuite ? Une réponse sous 24 h, un appel direct.

Si une réponse manque, le visiteur la comble par la prudence et ne clique pas. Le bouton « Envoyer » échoue aux trois questions ; « Je reçois mon devis gratuit sous 24 h » répond aux trois.

Quoi écrire sur un bouton d'appel à l'action ?

Écrivez sur le bouton le résultat que le visiteur obtient, en 2 à 6 mots, avec un verbe d'action. Le libellé, c'est-à-dire le texte affiché sur le bouton, répond à la seule question que se pose le visiteur : pourquoi cliquer ?

Remplacer « Envoyer » et « Nous contacter » par le résultat obtenu

Un libellé générique oblige le visiteur à relire la page pour comprendre ce qu'il accepte ; un libellé précis le lui dit au moment de décider. Voici les remplacements que nous appliquons le plus souvent sur des sites de service.

Source : exemples rédigés par fsweb pour illustrer la méthode. Ils ne constituent pas un résultat de test mesuré.

La première personne (« Je reçois », « mon devis ») se lit sur un site de service comme la décision du visiteur lui-même. Testez-la face à la deuxième personne plutôt que de la poser en règle absolue.

Faut-il créer de l'urgence sur un bouton ? Pas sur un site de service

Non : une fausse urgence (« Offre limitée », « Plus que 2 places ») fait perdre la confiance d'un client qui cherche un artisan sérieux. Les guides qui recommandent l'urgence s'appuient sur l'e-commerce et le logiciel en ligne, où une promotion a une date de fin réelle.

Sur un site de service, la seule urgence légitime est celle du client : une fuite d'eau, une serrure bloquée. Pour un plombier, « Appeler maintenant » est urgent parce que le besoin l'est, pas parce que le site le simule.

Où placer les CTA sur un site vitrine ?

Placez le bouton principal dans le premier écran, la partie visible sans faire défiler, puis répétez-le là où le visiteur a pu prendre sa décision : après vos preuves, après vos tarifs, en fin de page. Sur mobile, ajoutez un bouton d'appel fixe en bas d'écran.

Le visiteur en urgence décide en haut de page ; celui qui compare décide après avoir lu vos avis clients. Un bouton placé juste sous le bloc d'avis sert donc ce second profil, comme nous l'expliquons dans notre guide de la preuve sociale sur un site web.

Combien de CTA par page ? Un principal, un secondaire

Une page de site vitrine a besoin d'une seule action principale, répétée autant que nécessaire, et au plus d'une action secondaire moins engageante. Par exemple : « Je reçois mon devis » en principal, « Voir nos réalisations » en secondaire.

Répéter le même bouton trois fois sur une page longue évite au lecteur de remonter. Ce qui le désoriente, c'est d'afficher trois actions différentes de même poids.

Faut-il un bouton d'appel fixe sur mobile ?

Oui : pour un artisan ou un commerce local, un bouton d'appel fixe en bas de l'écran mobile est le CTA le plus direct. Un seul toucher lance l'appel grâce à un lien « tel: », un lien qui ouvre le composeur du téléphone.

Vérifiez que ce bouton ne masque ni le contenu ni le bandeau cookies, et que le numéro affiché est décroché aux heures annoncées. Les autres pièges du téléphone sont détaillés dans notre article sur le site mobile first.

Couleur, taille, contraste : le design d'un call to action sur un site web

Un bouton call to action se remarque grâce au contraste avec ce qui l'entoure, pas grâce à une couleur réputée « vendeuse ». Un bouton orange ressort sur un site bleu et disparaît sur un site orange : la bonne couleur est celle que votre charte n'utilise nulle part ailleurs.

Le contraste compte plus que la couleur

Le texte d'un bouton doit offrir un rapport de contraste d'au moins 4,5:1 avec son fond, selon le critère 1.4.3 des WCAG, les règles d'accessibilité publiées par le W3C (l'organisme qui normalise le web). Le seuil descend à 3:1 pour un grand texte, soit 18 points ou 14 points en gras.

Un orange vif passe souvent sous ce seuil. Calculé avec la formule du W3C, l'orange #E4572E sur fond blanc donne 3,7:1 : acceptable pour un grand libellé en gras, insuffisant pour un texte courant. Vérifiez vos couleurs avant de valider la maquette.

Quelle taille minimale pour un bouton CTA ?

Une cible cliquable doit mesurer au moins 24 × 24 pixels CSS selon le critère 2.5.8 des WCAG 2.2 (niveau AA). Pour les commandes importantes, le W3C invite à viser le critère renforcé 2.5.5, soit 44 × 44 pixels CSS : c'est la taille à retenir pour votre bouton principal.

Sources : W3C, Understanding SC 2.5.8 Target Size (Minimum), mis à jour le 11 mai 2026 ; W3C, Understanding SC 1.4.3 Contrast (Minimum), mis à jour le 6 septembre 2026. Colonne « Ce que ça change » : lecture fsweb.

Exemples de CTA par métier et par intention du visiteur

Le bon CTA dépend de l'état d'esprit du visiteur au moment où il lit la page : en urgence, il veut appeler ; en comparaison, il veut voir ; décidé, il veut réserver ou demander un devis. L'échelle d'engagement fsweb associe chaque état d'esprit à un type de bouton.

Source : échelle d'engagement fsweb. Les délais cités sont des exemples, à remplacer par vos engagements réels.

La règle qui en découle : plus l'intention est froide, moins le bouton doit engager. Pour un artisan, nous détaillons la page complète dans notre article sur les bonnes pratiques d'un site internet d'artisan.

Pourquoi un site vitrine visité ne génère pas de demandes de devis

Un site vitrine qui reçoit des visites sans générer de contacts a souvent un problème entre le bouton et la confirmation, pas un problème de trafic. Voici les quatre erreurs de CTA que nous corrigeons le plus souvent.

Le bouton mène à une page Contact générique. Le visiteur qui voulait un devis tombe sur une adresse et un plan d'accès. Correction : envoyez chaque bouton vers le formulaire qui correspond à sa promesse.

Le formulaire demande trop tôt trop d'informations. Chaque champ superflu ajoute une raison d'abandonner. Correction : ne demandez au premier contact que ce qui sert à rappeler le prospect.

Le numéro de téléphone n'est pas cliquable sur mobile. Le visiteur doit le mémoriser ou le recopier. Correction : un lien « tel: » sur chaque numéro affiché.

Rien ne se passe après l'envoi. Sans message de confirmation, le visiteur ignore si sa demande est partie et quand on le rappellera. Correction : une page de remerciement qui annonce le délai de réponse.

Comment savoir si vos CTA fonctionnent ?

Mesurez deux chiffres pour chaque bouton : le nombre de clics et le nombre de contacts réellement reçus. Dans Google Analytics 4, l'outil de statistiques gratuit de Google, ces actions s'enregistrent sous forme d'événements : clic sur un lien « tel: », envoi du formulaire, affichage de la page de remerciement.

Un bouton très cliqué qui ne produit pas de demandes signale un problème après le clic. Pour savoir quel résultat viser, comparez-vous aux repères de notre article sur le taux de conversion d'un site web.

Un bouton qui promet, un parcours qui tient la promesse

Un bouton call to action efficace tient en trois éléments : un verbe, un résultat, et une promesse tenue juste après le clic. Le libellé se change en dix minutes ; le placement mobile, le formulaire et la mesure des clics relèvent de la construction du site.

C'est ce que fsweb intègre dès la maquette d'une création de site vitrine orientée conversion : appels à l'action visibles, parcours court vers le formulaire, suivi des contacts dès la mise en ligne.