badsender logo

Bouton cliquable dans un email.

10/05/2015

Vous désirez, au sein de votre campagne mail, insérer un Call to Action en HTML brut ? Belle initiative ! Cela permettra à votre bouton de s’afficher plus rapidement, et ce même si les images sont désactivées, et améliorera donc probablement votre taux de clics !

Comment rendre un CTA cliquable ?

Vous souhaitez rendre tout le bouton cliquable dans l’email, et pas seulement le texte, hein ? De plus, votre Call to Action comporte deux lignes de textes. Et quelques webmails récalcitrants refusent toujours de centrer verticalement ce texte au sein du bouton…

Voici notre solution pour avoir un bouton entièrement cliquable, testée et validée sur l’ensemble des webmails !

1. Tout d’abord, assurez-vous que la cellule <td> comprenant votre Appel à l’Action a bien une hauteur fixe. Ajoutez-lui l’attribut html valign="middle". Puis précisez dans l’attribut style de la cellule l’interlignage de votre texte (Par exemple : Pour une font-size de 13px, spécifiez un line-height de 16px, précédé d’un mso-line-height-rule:exactly; pour garantir un interlignage identique sur Outlook)

2. Vient ensuite votre lien en question (<a href="#">) : Spécifiez dans l’attribut style du lien qu’il doit se comporter comme une cellule de tableau (soit style="display:table-cell;"). Indiquez la hauteur du bouton (soit la hauteur de la cellule), sa largeur (soit la largeur de la cellule), et finissez ce travail avec un vertical-align:middle; toujours au sein de l’attribut style.

3. Testez. Nous sommes d’accord ? Si tout se passe bien, vous devez obtenir un résultat cohérent et vous avez enfin un bouton cliquable dans un email !

Exemple de code :

<table>
  <tbody>
    <tr>
      <td><a style="color: #ffffff; text-decoration: underline; display: table-cell; text-align: center; height: 60px; width: 600px; vertical-align: middle;" href="https://www.google.com" target="_blank" rel="noopener noreferrer">Test : Lien<br>
        attribut Line-height</a></td>
    </tr>
  </tbody>
</table>

Remarque : C’est une curiosité qui mérite qu’on en parle ; Terra, FAI aux Etats-Unis, Espagne et dans 16 autres pays d’Amérique Latine, ajoute non seulement un target="_blank à tout code lien que vous pourriez mettre en présentation (comme dans cet exemple), mais garde la mise en forme de votre code HTML pour l’affichage. Concrètement, si votre éditeur HTML propose une indentation de votre code, Terra la retranscrira de la même façon. Cela explique donc de nombreuses interrogations que vous pourriez peut-être avoir quant aux emails rendering étranges sur ce webmail !

Article mis à jour le 19/05/2021.

Profitez de notre expertise en intégration HTML d’email !

Besoin d’un design system email ? Ou d’un design email tout court ? Ou d’une intégration HTML pour email ? Ou d’un email builder ? On peut aussi vous proposer :

Badsender anime aussi une formation sur le sujet du développement HTML d’un email !

Envie de recevoir la newsletter et les actus de Badsender par email ?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.