Nous contacter
Outil gratuit

Générateur de bouton HTML email bulletproof

Outlook transforme les boutons mis en forme en simples liens. Créez, sans écrire de code, des boutons email en HTML qui fonctionnent dans Outlook, Gmail et les autres grands clients de messagerie.

Votre bouton

Styles prédéfinis

Texte et lien

Couleurs

Taille et forme

Bordure

Aperçu

    Votre HTML bulletproof

    Ensuite : collez-le dans un bloc HTML.
    Voir comment faire dans Pardot, HubSpot et d’autres outils

    Votre bouton en cinq étapes

    Les boutons email bulletproof sont des boutons d’appel à l’action (CTA) construits en HTML et CSS plutôt qu’en images. Les boutons en image disparaissent quand un client de messagerie bloque les images, ce qui arrive souvent dans Outlook. Les boutons bulletproof restent visibles et cliquables. Ce générateur crée des boutons responsive pour Gmail, Outlook, Apple Mail, Yahoo Mail et les autres grands clients de messagerie, avec une version VML pour Outlook déjà intégrée.

    1. 1

      Personnalisez votre bouton

      Réglez le texte, l’URL, la taille de police, les couleurs, le padding et la largeur selon le design de votre email.

    2. 2

      Aperçu en direct

      Voyez le bouton dans un email au fil de vos modifications, en mode clair et sombre, sur mobile et dans Outlook. Vérifiez qu’il respecte votre charte avant de copier le code.

    3. 3

      Récupérez le code HTML

      Le code responsive du bouton s’écrit pendant que vous tapez. Inutile de connaître le HTML inline.

    4. 4

      Copiez, collez

      Copiez le HTML et collez-le dans votre template d’email dans Account Engagement (Pardot), HubSpot ou toute autre plateforme d’emailing. Voir les instructions par plateforme.

    5. 5

      Prêt à envoyer

      Votre bouton est conçu pour tous les principaux clients de messagerie : il s’affiche comme un bouton cliquable partout où l’email s’ouvre.

    Pourquoi utiliser cet outil gratuit

    Un bouton qui fonctionne dans Outlook, sans ouvrir d’éditeur de code.

    • Simplicité

      Pas besoin de coder

      Créez un bouton email responsive sans toucher au code.

      Partez de l’un de ces exemples :

    • Facilité d’utilisation

      Aperçu en direct

      Changez les couleurs, les marges intérieures et l’alignement : le bouton se met à jour sous vos yeux.

    • Responsive design

      Adapté au mobile

      Conçu pour les clients de messagerie sur ordinateur comme sur mobile.

    • Compatibilité

      Large prise en charge des messageries

      Fonctionne dans Outlook, Gmail, Apple Mail et les autres principaux clients de messagerie.

    Conçu pour tous les principaux clients de messagerie

    Les boutons utilisent un code de repli VML pour Microsoft Outlook, et du HTML et du CSS standard pour tous les autres clients. Vos CTA s’affichent correctement partout, même quand les images sont bloquées.

    • GmailWeb, iOS, Android
    • Outlook2013, 2016, 2019, 365
    • Outlook.comWeb
    • Apple MailmacOS, iOS
    • Yahoo MailWeb, mobile
    • ThunderbirdOrdinateur

    Pourquoi Outlook a besoin de sa propre version : voir la prise en charge des coins arrondis (border-radius) par client de messagerie (Can I email, s’ouvre dans un nouvel onglet) sur Can I email.

    Utiliser votre bouton dans vos plateformes marketing

    Le HTML fonctionne dans toute plateforme d’email marketing qui accepte du HTML personnalisé.

    Ajouter le bouton dans Pardot

    1. Générez le code de votre bouton avec l’outil ci-dessus
    2. Dans Account Engagement, ouvrez votre contenu d’email ou votre template d’email et cliquez sur « Edit in Builder »
    3. Faites glisser un composant HTML à l’emplacement du bouton
    4. Collez le code dans son champ « HTML Value » (jusqu’à 10 000 caractères par champ)
    5. Enregistrez, puis envoyez-vous un test sur Outlook classique

    Ajouter le bouton dans Marketing Cloud Next

    1. Générez le code de votre bouton avec l’outil ci-dessus
    2. Ouvrez votre email dans l’éditeur d’emails de Marketing Cloud Next
    3. Faites glisser un composant HTML à l’emplacement du bouton
    4. Collez le code de votre bouton bulletproof ; s’il ne s’enregistre pas, ajoutez un espace ou un saut de ligne après
    5. Enregistrez, puis envoyez-vous un test sur Outlook classique

    Ajouter le bouton dans HubSpot

    1. Générez le code de votre bouton avec l’outil ci-dessus
    2. Ouvrez votre email dans l’éditeur d’emails de HubSpot
    3. Faites glisser un module « Custom HTML » dans votre email
    4. Collez le code de votre bouton bulletproof dans le champ HTML
    5. Prévisualisez et testez votre email

    Remarque : les boutons intégrés de HubSpot fonctionnent plutôt bien dans Outlook. Les boutons bulletproof vous donnent plus de contrôle sur le design et ajoutent une version dédiée à Outlook.

    Ajouter le bouton dans Mailchimp

    1. Générez le code de votre bouton avec l'outil ci-dessus
    2. Dans votre campagne Mailchimp, ajoutez un bloc de contenu Code
    3. Collez le code de votre bouton bulletproof
    4. Testez le rendu sur différents appareils avec l'aperçu de Mailchimp

    Autre possibilité : vous pouvez aussi modifier la source HTML de n'importe quel bloc de texte en cliquant sur l'icône de code.

    Ajouter le bouton dans Marketo

    1. Générez le code de votre bouton avec l'outil ci-dessus
    2. Ouvrez votre template d'email dans l'éditeur d'emails de Marketo
    3. Cliquez dans une section HTML modifiable ou ajoutez un module HTML
    4. Passez en mode HTML dans l'éditeur de texte enrichi
    5. Collez le code de votre bouton bulletproof
    6. Enregistrez et approuvez votre email

    Ajouter le bouton dans Klaviyo

    1. Générez le code de votre bouton avec l'outil ci-dessus
    2. Dans l'éditeur d'emails de Klaviyo, faites glisser un bloc Texte dans votre email
    3. Cliquez sur le bouton Source dans la barre d'outils du texte
    4. Collez le code de votre bouton bulletproof
    5. Cliquez sur Enregistrer
    Une femme avec des écouteurs travaille sur son ordinateur portable, absorbée dans ses pensées

    Des boutons email qui génèrent des clics

    Six conseils pour des boutons sur lesquels on clique vraiment.

    • Conseil 1

      Utilisez des verbes d'action

      Commencez par un verbe, comme « Commencer », « Télécharger maintenant » ou « Réservez votre place ». Évitez les textes génériques comme « Cliquez ici » ou « Envoyer ».

    • Conseil 2

      Jouez sur le contraste

      Choisissez une couleur qui contraste avec le fond de votre email et qu'on ne retrouve nulle part ailleurs dans le design.

    • Conseil 3

      Faites court

      L'idéal : deux à quatre mots. S'il vous en faut plus de cinq, utilisez plutôt un lien texte.

    • Conseil 4

      Un seul bouton

      Évitez que vos boutons se fassent concurrence. Utilisez un seul CTA clair par section d'email pour que vos lecteurs sachent exactement où cliquer.

    • Conseil 5

      Dimensionnez pour le mobile

      Donnez à vos boutons au moins 200 px de large et 50 px de haut. Apple recommande une zone tactile d'au moins 44 × 44 points.

    • Conseil 6

      Laissez de l'espace

      Laissez assez d'espace autour de votre bouton pour qu'il ne paraisse pas à l'étroit. Il est ainsi plus facile à repérer et à toucher sur mobile.

    Mode sombre et boutons accessibles

    Certaines boîtes de réception modifient vos couleurs, et certains lecteurs les voient mal. Six points à vérifier avant l'envoi.

    Le mode sombre peut modifier les couleurs. Litmus classe les boîtes de réception en trois groupes. Apple Mail ne change rien. Outlook.com et l'app Gmail sur Android passent les fonds clairs en sombre. L'app Gmail sur iPhone et Outlook pour Windows inversent toutes les couleurs. Gmail et Outlook.com peuvent aussi inverser les couleurs des boutons.

    Le remplissage VML ne change pas. Litmus a constaté qu'en mode sombre, Office 365 pour Windows inverse les couleurs de fond mais laisse tel quel le remplissage du bouton VML. Choisissez une couleur qui fonctionne sur fond clair comme sur fond sombre, et vérifiez-la dans la vue Sombre de l'aperçu.

    • Un contraste de 4,5:1. Les WCAG 2.2 demandent 4,5:1 entre le texte et le fond, et 3:1 pour les grands textes (environ 24 px, ou 18,5 px en gras). Le générateur affiche votre ratio pendant la saisie.
    • Assez grand pour le doigt. Les WCAG 2.2 fixent le minimum à 24 × 24 pixels CSS (AA) et le niveau renforcé à 44 × 44 (AAA). Apple demande au moins 44 × 44 points. Le générateur signale tout bouton de moins de 44 px de haut.
    • Un texte qui dit où mène le lien. Les WCAG 2.2 exigent que la fonction d'un lien ressorte de son texte ou de son contexte. « Télécharger la grille tarifaire » dit au lecteur ce qui va se passer ; « Cliquez ici » a besoin de la phrase qui l'entoure.
    • Du vrai texte, pas d'image. Le lien HTML est du vrai texte : il s'affiche même quand les images sont désactivées, et les lecteurs d'écran le lisent comme un lien. Litmus déconseille les boutons en image pour ces deux raisons. Litmus note aussi que le VML pose ses propres problèmes d'accessibilité ; la partie VML reste donc réservée à Outlook classique.

    Outlook classique ou nouvel Outlook

    Seul Outlook classique pour Windows lit la partie VML. Le nouvel Outlook pour Windows, Outlook sur le web, Outlook pour Mac et les apps mobiles affichent le lien HTML avec ses coins arrondis. Gardez quand même le VML : Microsoft prend en charge Outlook classique jusqu'en 2029 au moins.

    La partie du code affichée par chaque version

    • Outlook classique pour Windows (2007 à 2019, Microsoft 365)
      Moteur de rendu : le moteur HTML de Word      VML
    • Nouvel Outlook pour Windows
      Moteur de rendu : Outlook sur le web, dans une app (WebView2)      HTML
    • Outlook sur le web, Outlook.com
      Moteur de rendu : le navigateur      HTML
    • Outlook pour Mac
      Moteur de rendu : WebKit      HTML
    • Outlook pour iPhone et Android
      Moteur de rendu : un moteur basé sur WebKit      HTML

    Boutons bulletproof : les méthodes comparées

    Le guide de Litmus décrit cinq façons de coder un bouton d’email. Seul le VML conserve les coins arrondis dans Outlook classique pour Windows : ce générateur écrit donc du VML pour Outlook et un simple lien HTML pour toutes les autres messageries.

    MéthodeCoins dans Outlook classiqueCliquable dans Outlook classiquePoints d’attention
    VML + lien HTML (ce générateur)ArrondisTout le boutonDeux versions d’un même bouton, donc le lien apparaît deux fois. Litmus signale que certaines plateformes d’emailing n’appliquent pas le tracking au lien de la partie VML.
    Padding conditionnel (la méthode qu’utilise Litmus)CarrésTout le boutonDu code propre à Outlook pour obtenir le bon padding.
    Padding sur le lienCarrésLe texte seulementOutlook classique n’applique le padding qu’aux cellules de tableau.
    Bordure sur le lienCarrésTout le boutonOutlook dessine les bordures un peu plus fines, si bien que la taille du bouton change.
    Padding sur la cellule, lien à l’intérieurCarrésNon précisé par LitmusCouleur et taille se trouvent sur deux balises : chaque modification se fait donc deux fois.

    Une image ne convient pas : elle disparaît quand les images sont désactivées, et les lecteurs d’écran peuvent ne pas la lire.

    Le code du bouton, ligne par ligne

    Ce que fait chaque partie du code généré, de haut en bas. L’exemple reprend le réglage par défaut du générateur : 250 px de large, coins de 6 px.

    Le code généré

    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td align="center">
      <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/" style="height:47px;v-text-anchor:middle;width:250px;" arcsize="13%" stroke="f" fillcolor="#2563EB">
        <w:anchorlock/>
        <center style="color:#FFFFFF;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:bold;">Get Started</center>
      </v:roundrect>
      <![endif]-->
      <!--[if !mso]><!-->
      <a href="https://example.com/" target="_blank" style="display:inline-block;width:202px;padding:14px 24px;background-color:#2563EB;border-radius:6px;color:#FFFFFF;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:bold;line-height:1.2;text-align:center;text-decoration:none;-webkit-text-size-adjust:none;">Get Started</a>
      <!--<![endif]-->
    </td>
  </tr>
</table>
    • <table role="presentation"> Une seule cellule de tableau contient le bouton et son alignement, une mise en page que toutes les messageries savent lire. Le rôle indique aux lecteurs d’écran que le tableau sert à la mise en page et ne contient pas de données ; le lien à l’intérieur est toujours lu comme un lien.
    • <!--[if mso]> … <![endif]--> Un commentaire conditionnel. Les versions de bureau d’Outlook pour Windows qui affichent les emails avec Word lisent ce qu’il contient ; toutes les autres messageries y voient un commentaire et l’ignorent.
    • xmlns:v et xmlns:w Déclarent les deux vocabulaires qu’utilise la partie Outlook : v: pour VML (urn:schemas-microsoft-com:vml) et w: pour Word (urn:schemas-microsoft-com:office:word). Comme ils sont déclarés sur la forme elle-même, l’extrait fonctionne dans n’importe quel template.
    • <v:roundrect> Le rectangle arrondi de VML : le bouton dans Outlook classique. href fait de toute la forme un lien, fillcolor la colore, hauteur et largeur sont fixées en pixels, et v-text-anchor:middle centre le texte verticalement. stroke="f" supprime la bordure ; avec une bordure, la forme reçoit strokecolor et strokeweight.
    • arcsize Le degré d’arrondi des coins, en pourcentage. Microsoft le définit comme une part de la moitié du côté le plus court : 0 % donne des coins carrés, 100 % des extrémités rondes. Le générateur convertit votre rayon d’angle en arcsize, comme le fait celui de Campaign Monitor (rayon divisé par la hauteur). Si les coins doivent correspondre exactement, envoyez un test vers Outlook classique.
    • <w:anchorlock/> Un élément du vocabulaire de Word. Microsoft le définit comme « Anchor Location Is Locked » : une application qui modifie le document ne doit pas déplacer l’ancre de la forme. Le code de bouton de Campaign Monitor et celui de Litmus le contiennent aussi ; aucun des deux n’explique pourquoi.
    • <center> Le texte du bouton dans la forme, centré, avec la couleur, la police, la taille et la graisse que vous avez choisies.
    • <!--[if !mso]><!--> et <a> « If not mso » : toutes les messageries sauf Outlook classique reçoivent ce lien. Le padding, la couleur de fond, la bordure et border-radius en font un bouton. Outlook classique l’ignore, si bien que personne ne voit deux boutons.

    FAQ du générateur de bouton email

    Les questions des marketeurs sur les boutons bulletproof et sur ce générateur.

    Qu’est-ce qu’un bouton email bulletproof ?

    Un bouton email bulletproof est un bouton CTA codé en HTML et CSS qui s’affiche correctement dans tous les clients de messagerie, même quand les images sont bloquées.

    Contrairement aux boutons en image, les boutons bulletproof restent visibles et cliquables dans Outlook et dans les autres clients qui désactivent les images par défaut.

    Pourquoi mes boutons email ne fonctionnent-ils pas dans Outlook ?

    Microsoft Outlook affiche les emails avec le moteur de Word, pas avec un moteur de navigateur web. Des propriétés CSS comme border-radius, padding et background-color appliquées aux liens ne s’y affichent pas correctement : votre bouton stylé apparaît alors comme un simple lien texte.

    Les boutons bulletproof règlent ce problème avec du code VML (Vector Markup Language) placé dans des commentaires conditionnels que seul Outlook lit, tandis que tous les autres clients de messagerie reçoivent du HTML/CSS standard. Ce générateur écrit les deux versions pour vous.

    Les boutons générés sont conçus pour Microsoft Outlook 2013, 2016, 2019 et Microsoft 365 (Outlook classique pour Windows), ainsi que pour Gmail, Apple Mail, Yahoo Mail et les autres grands clients de messagerie.

    Puis-je plutôt utiliser des images pour mes boutons email ?

    Nous déconseillons les images pour vos principaux boutons CTA. La plupart des clients de messagerie bloquent les images par défaut, pour des raisons de sécurité et de confidentialité. Votre bouton disparaît alors complètement, et les lecteurs ne voient que le texte alternatif, ou rien du tout.

    Les boutons bulletproof construits en HTML restent visibles et cliquables quand les images sont désactivées : votre appel à l’action est donc toujours là.

    Faut-il savoir coder pour utiliser cet outil ?

    Non. Réglez les couleurs, le padding, le texte et la taille dans les champs du formulaire, puis copiez le HTML et collez-le dans votre template d’email.

    Puis-je utiliser ces boutons dans Pardot, HubSpot ou Marketo ?

    Oui. Le HTML fonctionne avec toutes les plateformes d’emailing, dont Account Engagement (Pardot), HubSpot, Marketo et Mailchimp. Collez le code dans l’éditeur HTML de votre template d’email.

    Comment adapter la couleur du bouton à ma marque ?

    Choisissez la couleur de votre marque avec le sélecteur « Fond » du générateur ci-dessus, ou saisissez son code hexadécimal (par exemple #FF5733) pour une correspondance exacte.

    Ajustez ensuite la couleur du texte pour garder un contraste suffisant. Un texte blanc sur fond foncé ou un texte foncé sur fond clair donne en général le meilleur résultat.

    Quelle est la taille idéale d’un bouton d’email sur mobile ?

    Les Human Interface Guidelines d’Apple recommandent une zone tactile d’au moins 44 × 44 points. Pour les boutons d’email, nous recommandons au moins 200 pixels de large et 50 pixels de haut.

    On touche ainsi facilement le bouton sur un téléphone, sans effleurer le contenu autour. Prévoyez à l’intérieur du bouton une marge (padding) d’au moins 12 à 15 pixels de chaque côté.

    Quelle différence entre un bouton VML et un bouton sans VML ?

    Le VML (Vector Markup Language) est un code propre à Microsoft, utilisé pour afficher les boutons dans Outlook. Les boutons VML offrent plus d’options de mise en forme, mais demandent un code complexe. Ce générateur l’écrit pour vous : une version VML pour Outlook, placée dans des commentaires conditionnels que seul Outlook lit, et des tableaux HTML standard avec du CSS inline pour tous les autres clients.

    À quoi sert w:anchorlock dans un bouton bulletproof ?

    Il vient du vocabulaire de Word : Microsoft le définit comme « Anchor Location Is Locked », si bien qu’une application qui modifie le document ne déplace pas la forme.

    Les boutons VML de Campaign Monitor et de Litmus l’intègrent aussi, sans dire pourquoi. Laissez-le : il se trouve dans la partie VML, que seul Outlook classique lit.

    Le nouvel Outlook pour Windows a-t-il besoin du VML ?

    Non. Le nouvel Outlook pour Windows repose sur Outlook sur le web et affiche le lien HTML avec ses coins arrondis.

    Gardez la partie VML pour Outlook classique pour Windows, que Microsoft prend en charge au moins jusqu’en 2029. Les deux parties ne s’affichent jamais ensemble.

    D’autres outils gratuits

    Générateur de fichier calendrier ICSDes fichiers calendrier ICS pour Outlook, Apple iCalendar, Google Agenda et d’autres.Commencer Générateur de champs de fusion HML conditionnelsDes champs de fusion HML conditionnels pour les emails, formulaires et landing pages Pardot, avec texte de remplacement.Commencer Générateur de configuration du domaine d’envoi PardotLes instructions DNS pour le domaine d’envoi de vos emails Pardot, prêtes à transmettre à votre service informatique.Commencer
    Voir tous les outils gratuits

    Avec nous, Salesforce Marketing travaille pour vous

    Parlez à un consultant certifié, pas à un commercial, et sortez du premier appel en sachant quelle est votre prochaine étape.

    Nous contacter