Que l'on soit designer ou responsable marketing, l'enjeu est le même : inciter les destinataires à interagir avec nos campagnes. C'est là qu'intervient l'appel à l'action, ou CTA. Encore faut-il que le bouton s'affiche partout, y compris lorsque les images sont bloquées. C'est tout l'intérêt des boutons « bulletproof », codés en HTML et CSS.
En bref : un bouton « bulletproof » est un CTA construit en HTML et CSS plutôt qu'en image, pour s'afficher même quand les images sont désactivées et rester lisible par les lecteurs d'écran. Il existe quatre méthodes principales (padding, bordures, padding combiné aux bordures, et un repli VML pour les anciens Outlook Windows). Visez une zone cliquable d'au moins 44 px de haut pour le confort tactile sur mobile, avec un texte contrasté. Les exemples de code ci-dessous sont prêts à copier.
N'enfermez pas votre CTA dans une image
En raison du blocage des images par de nombreux clients de messagerie, les CTA basés sur une image sont à éviter. Si votre incitation à l'action est contenue dans une image, beaucoup d'abonnés risquent de passer à côté de votre message lorsque les images ne s'affichent pas.
L'impact est quasiment nul lorsque les images sont désactivées
Un bouton en image pose aussi un problème d'accessibilité : si le libellé de l'action est masqué dans un visuel sans texte alternatif, les lecteurs d'écran ne peuvent pas le restituer, et l'email devient inaccessible aux abonnés malvoyants. Heureusement, il existe une meilleure approche : les boutons bulletproof.
Le principe des boutons bulletproof
Les boutons bulletproof se construisent avec du code plutôt qu'avec des images. Vous remplacez vos fichiers GIF, PNG et JPEG par du HTML et du CSS. En n'utilisant que du HTML et du CSS, le bouton s'affiche dans toutes les messageries, même images désactivées. Vous pouvez aussi mettre à jour son contenu et son style en modifiant simplement le modèle HTML, sans repasser par un outil graphique puis un serveur. La plupart des plateformes d'emailing modernes intègrent d'ailleurs des générateurs de boutons directement dans l'éditeur. Voyons quatre approches pour les coder.
Boutons VML
L'approche historique a été popularisée par Stig, développeur chez Campaign Monitor. Elle applique le style directement sur le lien pour structurer le bouton dans la majorité des clients. La structure repose sur les propriétés line-height et width. Comme repli pour Microsoft Outlook sous Windows, on utilise le langage VML (Vector Markup Language) dans un commentaire conditionnel propre à Outlook.
<a class="btn-orange" title="Titre de la page" href="#"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.exemple.fr" style="height:44px;v-text-anchor:middle;width:180px;" arcsize="8%" strokecolor="#EB7035" fillcolor="#EB7035">
<w:anchorlock/>
<center style="color:#ffffff;font-family:Helvetica,Arial,sans-serif;font-size:16px;">Je suis un bouton</center>
</v:roundrect>
<![endif]-->
<a href="https://www.exemple.fr" style="background-color:#EB7035;border:1px solid #EB7035;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:180px;-webkit-text-size-adjust:none;mso-hide:all;">Je suis un bouton</a>
</div>
</td>
</tr>
</table></a>Cette méthode crée deux versions du bouton : le commentaire conditionnel [if mso] cible Outlook et dessine le bouton en VML, tandis que tous les autres clients utilisent le lien <a> standard placé juste après. La hauteur de 44 px et la largeur fixée garantissent une zone cliquable confortable.
Boutons construits avec du padding
Cette méthode s'appuie sur un tableau HTML simple. Le remplissage (padding) appliqué à la cellule structure le bouton, les attributs HTML et le CSS le stylisent.
<a class="btn-orange" title="Titre de la page" href="#"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#EB7035" style="padding:14px 22px;border-radius:4px" align="center"><a href="https://www.exemple.fr" target="_blank" style="font-size:16px;font-family:Helvetica,Arial,sans-serif;font-weight:normal;color:#ffffff;text-decoration:none;display:inline-block;">Je suis un bouton</a></td>
</tr>
</table>
</td>
</tr>
</table></a>Avantages
- Fonctionne bien sur la plupart des clients de messagerie.
- Le code reste familier pour qui connaît HTML et CSS, ce qui simplifie la création et la mise à jour.
Limite
- Le bouton entier n'est pas toujours cliquable, ce qui peut créer de la friction pour les abonnés qui cliquent à côté du lien.
Boutons construits avec des bordures
Cette approche est proche de la précédente, mais au lieu de reposer sur le padding, elle ajoute des bordures épaisses au lien lui-même pour construire le CTA.
<a class="btn-orange" title="Titre de la page" href="#"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="https://www.exemple.fr" target="_blank" style="font-size:16px;font-family:Helvetica,Arial,sans-serif;color:#ffffff;text-decoration:none;border-radius:4px;background-color:#EB7035;border-top:14px solid #EB7035;border-bottom:14px solid #EB7035;border-right:22px solid #EB7035;border-left:22px solid #EB7035;display:inline-block;">Je suis un bouton</a>
</td>
</tr>
</table>
</td>
</tr>
</table></a>Le lien est déclaré en bloc et les bordures servent de remplissage. Résultat : le bouton entier reste lisible et cliquable, même dans les anciens clients.
Avantages
- Tout le style est porté par la balise de lien, ce qui simplifie le code.
- Un seul bouton, sans double version ni VML.
- Pas besoin de définir une hauteur ou une largeur fixes : le bouton reste très adaptable.
Limites
- Outlook réduit légèrement la taille des bordures.
- Outlook ne reconnaît pas toujours la balise
<a>comme un élément de niveau bloc. - Peu de marge pour des styles avancés sur le lien lui-même.
Boutons combinant padding et bordures
Cette dernière approche fusionne les deux précédentes. Le lien est stylisé avec du padding et au moins une bordure de 1 px ; la couleur de fond est appliquée au <td> plutôt qu'au <a>, car Outlook ne gère pas le padding horizontal sur la balise <a>.
<a class="btn-orange" title="Titre de la page" href="#"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="border-radius:4px;" bgcolor="#e9703e"><a href="https://www.exemple.fr" target="_blank" style="font-size:16px;font-family:Helvetica,Arial,sans-serif;color:#ffffff;text-decoration:none;border-radius:4px;padding:14px 22px;border:1px solid #e9703e;display:inline-block;">Je suis un bouton</a></td>
</tr>
</table>
</td>
</tr>
</table></a>Avantages
- Un seul bouton à coder, facile à mettre à jour.
- Aucune dimension fixe n'est imposée.
- Les fonds sont gérés par des couleurs unies, gage de compatibilité et d'accessibilité.
Limite
- Le style est réparti entre le
<td>et le<a>: les deux doivent être mis à jour à chaque changement.
Accessibilité et taille tactile
Un bon bouton d'email n'est pas seulement visible, il doit être facile à activer et lisible par tous. Les recommandations d'accessibilité du W3C fixent une taille de cible minimale pour les éléments interactifs : le critère Target Size (Minimum) des WCAG 2.2 retient 24 px comme plancher, mais les guides d'ergonomie tactile recommandent plutôt autour de 44 px de haut pour un confort réel au doigt sur mobile. Trois réflexes utiles :
- Prévoir une hauteur de bouton d'environ 44 px et un espacement suffisant avec les liens voisins.
- Employer un texte de libellé réel (jamais uniquement une image), pour que les lecteurs d'écran l'annoncent.
- Garantir un contraste suffisant entre la couleur du texte et celle du fond du bouton.
Pour une vision d'ensemble du sujet, consultez notre guide complet de l'accessibilité web.
Hacks et améliorations
Chacune des méthodes ci-dessus constitue une bonne base, que l'on peut affiner.
Padding horizontal pour Outlook
Outlook ne gère pas bien le padding horizontal, ce qui peut coller le texte du CTA aux bordures du bouton. Un contournement rapide consiste à ajouter des espaces insécables de chaque côté du lien, dans un commentaire conditionnel destiné à Outlook.
<!--[if mso]> <![endif]-->Je suis un bouton<!--[if mso]> <![endif]-->Amélioration progressive avec les media queries
Pour enrichir le rendu, vous pouvez appliquer, dans la limite du support des clients, des styles avancés : bordures, dégradés CSS, polices web, effets de survol. Ces améliorations restent optionnelles et ne doivent pas compromettre le rendu de base.
Compatibilité selon les clients de messagerie
Aucun bouton d'email n'est réellement infaillible : le support reste inégal et il n'existe pas de norme unique. En pratique, les quatre méthodes présentées ici sont toutefois bien prises en charge par les principaux clients :
- Apple Mail, iOS Mail, Thunderbird, applications et webmails Gmail, Yahoo Mail, Outlook.com, Orange, SFR : les quatre approches s'affichent correctement.
- Outlook sous Windows (versions historiques comme récentes) : le repli VML reste le plus fiable ; les autres méthodes fonctionnent, avec parfois des coins arrondis mal rendus ou un léger rétrécissement du bouton.
- Points de vigilance : certains clients anciens ou marginaux (IBM Notes, ancien Lotus Notes, application Outlook sur Android pour la variante VML) ne rendent pas tous les cas de figure. Ils représentent aujourd'hui une part d'audience réduite.
La technique des boutons bulletproof a été documentée et diffusée notamment par Litmus, référence du secteur de l'email ; son guide de référence sur les boutons bulletproof détaille les tableaux de compatibilité complets, mis à jour au fil des évolutions des clients de messagerie.
Vos campagnes sont-elles à l'épreuve de tout ?
Quelle que soit l'approche retenue, coder ses boutons plutôt que de les intégrer en image apporte un bénéfice net. Même dans les messageries qui bloquent les images, un bouton bulletproof garantit un message clair, ce qui augmente la probabilité que vos abonnés interagissent. Testez systématiquement votre rendu avant l'envoi, et privilégiez la simplicité : une couleur de fond unie, un libellé explicite et une zone tactile confortable suffisent dans la grande majorité des cas.
Notre méthode. Les quatre modèles de code ci-dessus ont été relus et nettoyés pour être directement réutilisables (couleurs à adapter à votre charte, liens à remplacer). Les recommandations d'accessibilité s'appuient sur les critères publics des WCAG 2.2 du W3C, consultés le 7 juillet 2026. Le tableau de compatibilité détaillé n'est pas reproduit ici : il évolue avec les clients de messagerie, et nous renvoyons vers la source de référence tenue à jour plutôt que d'afficher un état figé. Nous n'avons pas retesté chaque client de messagerie un à un.
Pour aller plus loin :
