Générateur de bouton pour courriel

Comment le bouton entre dans votre courriel

Une copie peut transporter plus d’une version de la même chose. Copier le bouton en dépose deux dans votre presse-papiers : le bouton en texte mis en forme, et son texte et son lien en texte brut. Un éditeur qui accepte le texte mis en forme, comme ceux des applications de courriel, prend la première : ce que vous collez est le bouton, dessiné, avec son lien, et non un bloc de code.

• Ouvrez le message que vous rédigez.
• Cliquez là où le bouton doit aller.
• Collez, comme vous colleriez un mot.

Un endroit qui n’accepte aucune mise en forme, comme un courriel en texte brut ou une boîte de clavardage, reçoit à la place le texte et l’adresse. Un éditeur peut aussi ne garder qu’une partie d’un style collé : regardez le bouton une fois dans votre message avant de l’envoyer. Copier le HTML vous donne le balisage lui-même, pour un outil d’infolettre, un gabarit ou un éditeur de signature qui offre un champ pour le code.

Pourquoi il est construit si simplement

Un courriel HTML garde très peu de ce qui met en forme une page web : pas de feuille de style ni de police web sur lesquelles compter, pas de scripts. Le bouton est donc un seul lien, et tout ce qui le dessine (sa couleur, son espace, ses coins, sa police) est écrit sur le lien lui-même. C’est la forme que les applications de courriel conservent le mieux.

Les polices sont de celles que la plupart des ordinateurs ont déjà, chacune suivie d’une police semblable pour l’appareil qui ne l’a pas. Et le bouton est du texte, pas une image : il reste net à toutes les tailles, un lecteur d’écran lit son texte, et il s’affiche même là où les images sont bloquées.

Comment les applications de courriel le dessinent

L’Outlook classique de bureau pour Windows dessine les messages avec le moteur de Word, qui respecte l’espacement d’une cellule de tableau, mais pas celui d’un lien. Si vos lecteurs l’utilisent, choisissez Un tableau sous Plus d’options : l’espace est alors sur une cellule, et les coins sont carrés. Sous cette forme, c’est le texte qui est le lien, pas la zone colorée autour.

Ce que le mode sombre fait au bouton

Une application de courriel en mode sombre décide elle-même quoi faire de vos couleurs. Certaines assombrissent leur propre page et laissent le message tel qu’il a été envoyé. D’autres assombrissent aussi les fonds clairs et éclaircissent les textes foncés. D’autres encore inversent chaque couleur. Les trois vues sombres montrent chacun de ces comportements sur votre bouton, avec le contraste de son texte dans cette vue ; ce sont des simulations, puisque chaque application applique ses propres règles.

• Plus le texte et le bouton sont éloignés en clarté, mieux ils tiennent : du blanc sur une couleur très foncée, ou du noir sur du blanc, reste lisible quand une application les inverse. Du blanc sur un ton moyen peut ne plus suffire.
• Un bouton noir ou très foncé peut perdre son contour sur une page sombre : une fine bordure plus claire lui garde sa forme.
• Un bouton blanc au texte foncé est celui qui est le plus souvent inversé, puisque les fonds clairs sont la première chose qu’un mode sombre change.

Un texte qu’on peut lire

Le contraste sous l’aperçu est le rapport que les règles d’accessibilité (WCAG) mesurent entre le texte et le bouton, dans la vue que vous regardez. Un texte de taille courante demande 4,5:1 ; un grand texte, à partir de 24 px, ou d’environ 19 px s’il est en gras, demande 3:1. Pour étudier une paire de couleurs de plus près, il y a le vérificateur de contraste.

Vous envoyez une campagne ? Construisez d’abord le lien avec le générateur de liens UTM, puis collez-le ici : votre analytique dira alors de quel courriel vient la visite.