Click-to-call and bulletproof buttons in HTML email

Build buttons from live text and a background colour, never from an image. Write phone numbers as tel: links in E.164 format. Those two rules cover almost every click problem in HTML email, because the most common failure is not a styling bug — it is Outlook on Windows blocking remote images by default, which makes an image-based button vanish entirely.

Why image buttons fail

• Outlook desktop blocks remote images until the reader clicks "Download pictures". Your call to action becomes an empty box with alt text.
• Images do not scale sensibly in Outlook's Word rendering engine, so a retina button becomes a blurry or oversized block.
• Text inside an image is invisible to screen readers and to translation.
• Dark mode inverts backgrounds around a button image with a baked-in white background, producing a visible rectangle.
• An image-heavy, text-light message scores worse with filters.

A bulletproof button you can paste

This is the padded-anchor pattern with a VML fallback for Outlook on Windows. It renders as a filled, clickable block everywhere, with no images involved.

<table role="presentation" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" bgcolor="#1a56db" style="border-radius:6px;">
      <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
        href="https://example.com/demo" style="height:48px;v-text-anchor:middle;width:240px;"
        arcsize="12%" strokecolor="#1a56db" fillcolor="#1a56db">
        <w:anchorlock/>
        <center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">
          Book a 15-minute call
        </center>
      </v:roundrect>
      <![endif]-->
      <!--[if !mso]><!-->
      <a href="https://example.com/demo"
         style="display:inline-block;padding:14px 28px;font-family:Arial,sans-serif;
                font-size:16px;font-weight:bold;color:#ffffff;text-decoration:none;
                border-radius:6px;background-color:#1a56db;mso-hide:all;">
        Book a 15-minute call
      </a>
      <!--<![endif]-->
    </td>
  </tr>
</table>

The bgcolor on the <td> is the real safety net: if every style is stripped, the reader still sees a coloured block with white text. Keep the VML width and height in sync with the padded version so the two do not diverge visually.

Size, placement and colour

Use one primary call to action per email. If you need a secondary action, make it a plain text link, not a second button.

CTA copy that gets clicked

Name the thing that happens, in the reader's words, in two to five words. "Book a 15-minute call" beats "Submit". "See my placement report" beats "Learn more". Avoid "Click here" — it tells a screen-reader user nothing when links are read out of context, and it tells everyone else nothing either. Do not put the whole sentence in the button; put the sentence above it and the verb inside it.

Making a phone number clickable

<a href="tel:+14155550123"
   style="font-family:Arial,sans-serif;font-size:16px;color:#1a56db;text-decoration:underline;">
  +1 415 555 0123
</a>

• Always use E.164 in the href: a leading +, country code, then the national number with no spaces, dashes or parentheses. Display formatting goes in the link text, not the href.
• Extensions use a comma-pause and ;ext=: tel:+14155550123,,,456 dials and pauses, while tel:+14155550123;ext=456 is the semantically correct form. Support varies, so state the extension in the visible text too.
• SMS uses sms:+14155550123, and a prefilled body (?&body=...) works inconsistently across iOS and Android.
• Style it explicitly. iOS auto-links anything that looks like a phone number and restyles it blue, which can ruin a dark footer. Wrapping the number in your own tel: link with explicit colour is how you keep control; <meta name="format-detection" content="telephone=no"> is widely cited but unreliable inside email.

Click-to-call behaviour by client

Because desktop behaviour is unreliable, always print the number as readable text as well as linking it. A reader who cannot tap it must still be able to copy it.

When to use a clickable number — and when not to

Use it for support, for urgent transactional mail (delivery, fraud alerts, appointment reminders), for local services, and for any audience reading mostly on mobile. Do not use it as the primary call to action in cold outreach: you are asking for the highest-friction action available, from someone who does not know you, with no way to measure whether anyone tried. In cold email, a reply is the cheapest action you can ask for.

Mistakes that cost clicks and placement

1. An image-only button, so it disappears when images are blocked.
2. No bgcolor on the containing cell, so a stripped-style render shows invisible white text.
3. Alt text reading "cta-button-final-v3.png".
4. A tap target under 44px, or two buttons 4px apart.
5. A phone number in local format inside the href — tel:(415) 555-0123 fails on some diallers.
6. Buttons linking through a public shortener, putting a shared, frequently-abused domain in the message.
7. Five buttons to five different domains, which raises both filter risk and reader paralysis.
8. A button below the Gmail clipping point: keep HTML under about 100KB or part of your email hides behind "View entire message".

Pre-send checklist

• Rendered in Outlook Windows with images blocked
• Rendered in dark mode on iOS and in Outlook.com
• Button reads correctly at 320px width
• tel: href in E.164, number also present as plain text
• All link hostnames on a domain you control
• Plain-text part contains the button URL and the phone number
• Contrast checked at 4.5:1

MailPilot handles the delivery side of the same email: warm-up over OAuth or SMTP, SPF/DKIM/DMARC checks, daily per-mailbox reputation and real per-provider inbox placement — so a button nobody clicked can be separated from an email nobody received.