Un bon call to action est un libellé de bouton court, qui commence par un verbe et nomme ce que le visiteur obtient, accompagné d'une ligne de microcopy qui lève sa principale inquiétude. Voici 60 exemples originaux classés par type de page (hero, tarifs, formulaire, e-mail et plus), chacun avec un design de bouton et ce qui le rend efficace.
Un call to action (CTA) est l'élément qui invite le visiteur à passer à l'étape suivante : un bouton, un lien ou parfois un formulaire. La plupart des CTA efficaces partagent trois caractéristiques :
Chaque exemple ci-dessous a été écrit pour cette page ; aucun n'est copié d'une vraie entreprise. Remplacez par votre propre offre, et ne gardez une promesse (une date limite, un délai de réponse, une offre gratuite) que si elle est vraie pour vous.
Cherchez par mot (« gratuit », « essai », « réserver ») ou par type de page (« tarifs », « e-mail »).
Aller à : Section hero · Page de tarifs · Formulaire · E-mail · Page produit · Blog et newsletter · Onboarding d'application
Le premier bouton que voit un visiteur. Il doit nommer la première étape, pas tout le parcours.
Sans carte bancaire. Résiliation en deux clics.
Pourquoi ça marche : Associe l'action aux deux inquiétudes qu'on a avant un essai : le paiement et la sortie.
Un technicien local vous rappelle sous un jour ouvré.
Pourquoi ça marche : Dit ce que "gratuit" vous apporte et quand quelque chose va se passer.
Connectez un tableur et obtenez un tableau de bord en quelques minutes.
Pourquoi ça marche : Promet un résultat personnel plutôt qu'une démo générique.
Trois questions. Le prix à l'écran, sans appel commercial.
Pourquoi ça marche : La première personne ("mon") plus un effort clairement mesuré.
Répondez à cinq questions et obtenez un plan de repas à imprimer.
Pourquoi ça marche : Nomme un résultat concret que le visiteur peut se représenter.
Recherchez par code postal, jour ou niveau.
Pourquoi ça marche : Répond à la vraie question du visiteur (où et quand) au lieu de "En savoir plus".
S'ouvre dans votre navigateur. Rien à installer.
Pourquoi ça marche : Un verbe peu engageant, et la barrière de l'installation disparaît.
Calendrier en direct pour les 60 prochains jours.
Pourquoi ça marche : Pour les réservations, la disponibilité est la première question, alors commencez par elle.
Choisissez votre matériel et le temps dont vous disposez.
Pourquoi ça marche : Le visiteur construit quelque chose ; le microcopy montre que cela s'adapte à lui.
Un PDF de 12 pages. Nous vous l'envoyons une seule fois par e-mail.
Pourquoi ça marche : Fixe des attentes précises sur ce qui arrive et à quelle fréquence.
L'offre gratuite reste gratuite. Passez à l'offre supérieure seulement si vous avez besoin de plus.
Pourquoi ça marche : Répond à la question implicite "gratuit pendant combien de temps ?".
Quinze minutes, selon votre agenda.
Pourquoi ça marche : Présente l'appel comme une aide experte et en limite la durée.
Ici, les visiteurs comparent. Chaque bouton d'offre doit dire ce qui se passe ensuite pour cette offre.
Facturé mensuellement. Changez d'offre à tout moment.
Pourquoi ça marche : Utilise le nom de l'offre pour que le clic ressemble à un choix délibéré.
Vous choisissez une offre au jour 14, sinon rien ne se passe.
Pourquoi ça marche : Explique la fin de l'essai, le moment que les gens redoutent.
Inclut tout Starter, plus des places pour l'équipe.
Pourquoi ça marche : Un verbe court et l'offre, avec la différence précisée en dessous.
Pour 50+ places, des contrats sur mesure ou la facturation.
Pourquoi ça marche : Indique aux visiteurs à qui s'adresse ce bouton pour que les autres passent leur chemin.
Payez dix mois, profitez-en douze.
Pourquoi ça marche : Transforme une réduction en un calcul simple et vérifiable.
Votre travail et vos réglages actuels sont conservés.
Pourquoi ça marche : Pour les utilisateurs existants, la peur est de perdre leur travail ; le microcopy la dissipe.
Vous pouvez passer à l'offre supérieure sans rien perdre.
Pourquoi ça marche : "Commencer avec" présente l'offre bon marché comme une première étape, pas comme un choix définitif.
Un seul paiement. Mises à jour de cette version incluses.
Pourquoi ça marche : Pour un paiement unique, énonce clairement le modèle à côté du bouton.
Tableau complet, offre par offre.
Pourquoi ça marche : Une action secondaire pour les visiteurs qui ne sont pas encore prêts à choisir.
La plupart des équipes de 5 à 20 personnes commencent ici.
Pourquoi ça marche : Un conseil fondé sur l'adéquation, pas sur une popularité inventée.
Le bouton d'envoi est la dernière chose lue avant de s'engager. Dites ce que le visiteur obtient, pas ce que fait le formulaire.
Vous le recevrez par e-mail dans l'heure.
Pourquoi ça marche : Remplace "Envoyer" par le résultat et un délai.
Ensuite : choisissez un nom d'utilisateur.
Pourquoi ça marche : Montre qu'il reste une étape pour ne pas donner l'impression d'un piège.
En semaine de 8h à 18h. Nous n'appellerons pas en dehors de ces horaires.
Pourquoi ça marche : Respecte le temps du visiteur et en fixe les limites.
Nous vous enverrons par e-mail le lien de connexion et une invitation d'agenda.
Pourquoi ça marche : L'appropriation ("ma place") plus ce qui arrive ensuite.
Votre score s'affiche sur l'écran suivant.
Pourquoi ça marche : Pour un quiz, la récompense est le résultat, alors nommez-le.
Une vraie personne répond, généralement le jour même.
Pourquoi ça marche : Crée une attente humaine sans promettre de délai exact.
Un e-mail au lancement. Rien avant.
Pourquoi ça marche : Une petite promesse sur le volume d'e-mails réduit le coût de l'inscription.
Environ 10 minutes. Vous pouvez enregistrer et terminer plus tard.
Pourquoi ça marche : Une durée honnête plus un filet de sécurité pour les longs formulaires.
Fonctionne dans Google Sheets et Excel.
Pourquoi ça marche : Répond à "est-ce que ça marchera pour moi ?" au moment du clic.
Annulation gratuite jusqu'à 24 heures avant.
Pourquoi ça marche : Place la règle d'annulation là où se prend la décision.
Dans un e-mail, le bouton est en concurrence avec tous les autres messages de la boîte de réception. Soyez littéral : le lecteur doit savoir exactement où mène le lien.
Plus que deux étapes. Environ trois minutes.
Pourquoi ça marche : Une formulation axée sur la progression pour un rappel d'onboarding.
Suivez la livraison et modifiez l'adresse.
Pourquoi ça marche : Liste ce que le lecteur peut faire après le clic.
Code appliqué au paiement. Se termine dimanche à minuit.
Pourquoi ça marche : Une vraie date limite précise (uniquement si elle est réelle).
Sam a posé une question sur votre annonce.
Pourquoi ça marche : Nomme la personne, ce qui rend le message concret.
Environ six minutes de lecture.
Pourquoi ça marche : Pour les newsletters, le temps de lecture aide à choisir entre maintenant et plus tard.
Votre offre se termine à la date indiquée ci-dessus.
Pourquoi ça marche : Relie l'action à une information déjà présente dans l'e-mail.
Un seul geste. Dix secondes.
Pourquoi ça marche : Les demandes d'avis fonctionnent mieux quand l'effort est clairement minime.
Votre panier est conservé sept jours.
Pourquoi ça marche : Rassure : rien n'a été perdu.
Ce lien expire dans 24 heures.
Pourquoi ça marche : Transactionnel : un verbe simple, une conséquence simple.
Votre rendez-vous a été déplacé. Choisissez n'importe quel créneau libre.
Pourquoi ça marche : Redonne le contrôle après un changement que le lecteur n'a pas demandé.
Les visiteurs sont proches de l'achat et cherchent des raisons d'attendre. Supprimez ces raisons à côté du bouton.
Retours gratuits sous 30 jours.
Pourquoi ça marche : Le libellé standard que les gens cherchent du regard, avec le principal risque écarté.
Expédié demain pour toute commande avant 14h.
Pourquoi ça marche : Une vraie heure limite d'expédition donne une raison d'agir aujourd'hui.
Utilisez le guide des tailles ou indiquez votre taille habituelle dans d'autres marques.
Pourquoi ça marche : Lève l'hésitation la plus fréquente pour les vêtements.
Un e-mail quand il est en stock.
Pourquoi ça marche : Retient un visiteur face à une rupture de stock au lieu de le perdre.
Prévisualisez la gravure avant de payer.
Pourquoi ça marche : Montre que le visiteur garde le contrôle du résultat.
Enregistré dans votre compte, visible sur tous vos appareils.
Pourquoi ça marche : Une action plus douce pour ceux qui ne sont pas prêts à acheter.
Les lecteurs sont venus pour du contenu, pas pour un argumentaire commercial. Proposez-leur davantage de ce qu'ils ont déjà choisi.
Un e-mail chaque jeudi. Désinscription en un clic.
Pourquoi ça marche : La fréquence et la sortie annoncées d'emblée.
Les étapes de cet article sur une seule page imprimable.
Pourquoi ça marche : Un bonus de contenu directement lié à ce qu'ils viennent de lire.
Des conseils pratiques pour les petits commerces, deux fois par mois.
Pourquoi ça marche : Un seul mot suffit quand le microcopy précise le public et le rythme.
Faites-en une copie dans votre propre compte. Gratuit.
Pourquoi ça marche : Transforme immédiatement la lecture en action.
Partie 2 : fixer ses prix.
Pourquoi ça marche : Nomme le sujet suivant pour que le clic ait une récompense claire.
Nous répondons aux questions des lecteurs dans le prochain numéro.
Pourquoi ça marche : Invite à participer et dit ce qu'il en advient.
Les nouveaux utilisateurs décident dans les premières minutes si le produit vaut la peine d'être appris. Chaque bouton doit les mener vers leur premier résultat utile.
Vous pourrez le renommer ou le supprimer plus tard.
Pourquoi ça marche : Supprime la peur de commettre une erreur définitive.
Depuis un fichier CSV ou votre compte e-mail.
Pourquoi ça marche : Fait entrer de vraies données tôt, ce qui rend l'application utile plus vite.
Il aura la même vue que vous.
Pourquoi ça marche : Explique ce que verra la personne invitée avant l'envoi.
Vous pourrez le faire plus tard dans les Paramètres.
Pourquoi ça marche : Une sortie visible réduit les abandons sur les étapes facultatives.
Vous choisissez l'heure. Désactivé par défaut.
Pourquoi ça marche : Demande l'autorisation en laissant le contrôle à l'utilisateur.
Cinq courtes étapes. Fermez-la à tout moment.
Pourquoi ça marche : Annonce la durée pour que la visite paraisse facultative et courte.
| Formule | Schéma | Exemple |
|---|---|---|
| Verbe + résultat | [Obtenir / Voir / Commencer] + [ce qu'ils veulent] | Obtenir mon devis |
| Verbe + « mon » + objet | La première personne crée un sentiment d'appropriation | Planifier ma première semaine |
| Verbe + objet + durée | Ajoute le temps nécessaire | Obtenir un prix en 2 minutes |
| Verbe + objet + levée du risque | La levée du risque va généralement dans le microcopy | Commencer l'essai gratuit / Sans carte bancaire |
| Étape suivante, nommée | Pour les parcours en plusieurs étapes | Continuer vers la livraison |
| Question résolue | Reprenez ce qu'ils sont venus chercher | Voir les disponibilités |
Besoin d'idées de titres à placer au-dessus du bouton ? Essayez le générateur de titres.
Choisissez un verbe, un objet et une ligne de microcopy pour voir le bouton et copier son HTML.
Du CSS pur pour un bouton principal et un bouton secondaire avec les états focus, survol, enfoncé et désactivé. Ou concevez le vôtre avec le générateur de boutons CSS et parcourez des composants de boutons prêts à l'emploi.
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font: 600 1rem/1.2 system-ui, sans-serif;
text-decoration: none;
cursor: pointer;
transition: background-color 150ms, transform 100ms;
}
.btn-primary {
background: #1d4ed8;
color: #ffffff;
border: 0;
}
.btn-primary:hover { background: #1e40af; }
.btn-primary:active { transform: translateY(1px); }
.btn:focus-visible {
outline: 3px solid #93c5fd;
outline-offset: 2px;
}
.btn-secondary {
background: transparent;
color: #111827;
border: 2px solid #111827;
}
.btn-secondary:hover { background: #111827; color: #ffffff; }
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}Le même bouton principal avec des classes Tailwind :
<a href="/signup" class="inline-flex min-h-[44px] items-center rounded-lg bg-blue-700 px-6 py-3 font-semibold text-white hover:bg-blue-800 active:translate-y-px focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-blue-300">
Start your free trial
</a>Pour une section de fin complète autour du bouton, voir les composants de section CTA.
Ce sont des pistes à tester, pas des prédictions de ce qui gagnera. Les résultats dépendent de votre audience et de votre offre, alors testez un changement à la fois et attendez d'avoir assez de visiteurs avant de trancher (le calculateur de test A/B vous dit si une différence a des chances d'être réelle).
Pour voir comment les CTA s'intègrent au reste de la page, consultez qu'est-ce qu'une landing page.
Un call to action est le bouton, le lien ou le formulaire qui invite un visiteur à passer à l'étape suivante, comme démarrer un essai, réserver un appel ou acheter. Un bon CTA nomme le résultat et commence par un verbe.
En général deux à cinq. Mettez les détails supplémentaires, comme le prix, le temps ou ce qui se passe ensuite, dans une courte ligne de microcopy à côté ou sous le bouton plutôt que dans le libellé.
Le microcopy est la courte ligne à côté d'un call to action qui lève une inquiétude, par exemple « Sans carte bancaire » ou « Annulation gratuite jusqu'à 24 heures avant ». Il ne doit affirmer que des choses vraies pour votre offre.
Il n'existe pas de meilleure couleur unique. Ce qui compte, c'est que le bouton se détache de son fond et du reste de la page, et que son libellé ait un ratio de contraste d'au moins 4.5:1 avec la couleur du bouton.
Une page peut répéter la même action principale plusieurs fois, par exemple dans le hero et à la fin. Évitez d'afficher deux actions principales différentes de même poids dans la même vue ; faites de la seconde un bouton à contour ou un lien texte.
Verbe
Objet
Microcopy
Couleur
Copié
Copier le HTML
Commencer gratuitement · Sans carte bancaire