What is a bulletproof button in email?

A call to action built from HTML and CSS instead of an image. The label is live text and the shape comes from padding or borders, so it renders in every client even with images off.

Why shouldn't I use an image as an email button?

It disappears for anyone reading with images blocked, leaving no visible way to act, and gives screen readers nothing beyond alt text. Neither failure shows up in standard tracking.

What size should an email button be for mobile taps?

Litmus recommends a height between 42 and 72 pixels. Accessibility guidance sets the pointer target floor at 24 by 24 CSS pixels and an enhanced target at 44 by 44, so designing to the enhanced level satisfies both.

How do I make a phone number clickable in an email?

Wrap the number in an anchor tag and set the href to tel: followed by the number in international form: a leading plus sign, the country code, and digits only. Format the visible label however reads best.

Does clicking a phone number in Apple Mail always start a call?

Not on a Mac, where Apple Mail typically routes click-to-call to FaceTime, so a recipient without it set up may find nothing happens. On iPhone and iPad the link opens the dialer and waits for confirmation.

Can I stop a phone number from becoming clickable automatically?

Yes. Add the format-detection meta tag with telephone=no to your template head. Apple documents this as an extension that disables the automatic detection Safari on iOS performs by default.

Do bulletproof buttons work in Outlook?

They do, with caveats. Litmus testing shows the main techniques functioning, though desktop versions do not render rounded corners without VML. Conditional padding handles Outlook spacing most cleanly.

Is a clickable phone number good for cold outreach emails?

Usually not. Cold recipients rarely call a stranger, and the extra clickable element makes the message read like a marketing template. Save it for support, consultations, and post-purchase follow-up.

Clickable Phone Numbers & Buttons in HTML Email

A bulletproof button is a call to action coded in HTML and CSS instead of an image, so it displays in every email client even when images are blocked. To build one, style an anchor tag with padding, a background color, and conditional Outlook markup, then confirm the entire button, not just the label, is clickable.

Your subject line earns the open and your copy earns the interest. Then the reader reaches the point of action and finds a gray rectangle with a broken image icon where your email button should be.

That failure is quiet. Tracking cannot tell you which recipients saw a placeholder, or which heard nothing when a screen reader reached your image. Warmy is an AI-driven email warmup and deliverability platform that helps senders reach the primary inbox and stay there. This guide covers the two elements most often coded badly in HTML email, with code you can paste into a template.

Why image-based buttons fail in email

An image is the only way to guarantee a button looks identical everywhere, which is why designers reach for one. Litmus still advises against it: the guarantee holds only for recipients with images switched on who are not using a screen reader.

The scale of that exception is harder to pin down than the usual citation suggests. When Gmail began loading images automatically at the end of 2013, Litmus compared open rates before and after and found 57% of Gmail users had previously turned images on, leaving 43% reading with images off.

Litmus published that in May 2014 and now describes the figure in the past tense, so treat it as evidence that image blocking was once widespread rather than a current measurement.

The accessibility problem has no expiry date: when your call to action lives inside an image, a screen reader has nothing to announce beyond your alt text. Neither failure appears in reporting, so a campaign can underperform for months without anyone finding the cause.

What is a bulletproof button?

A bulletproof button is assembled from HTML and CSS rather than a graphic. The label is live text, the shape comes from padding or borders, and the color is applied through code.

Litmus groups the reliable approaches into five techniques. They differ in where the styling lives and how each degrades in Outlook, whose desktop versions ignore rounded corners and handle horizontal padding inconsistently.

Technique	How the shape is built	Rounded corners in Outlook	Best suited to
Conditional padding	Padding on the link; Outlook spacing via conditional comments	No	Most senders; one code block, fully clickable
VML	Vector Markup Language draws a shape behind the link	Yes	Designs needing rounded corners in Outlook
Padding	Padding on a table cell forms the box	No	Simple templates; only the label is clickable
Border	Thick borders on the link replace padding	No	Scalable buttons, no fixed dimensions
Padding and border	Padding plus a border on the link, background on the cell	No	Templates with a background image behind the button

One caveat applies to VML. Litmus notes it introduces accessibility complications and now recommends moving away from it, so treat rounded corners in Outlook as a preference rather than a requirement.

How to code a bulletproof button (copy-paste HTML)

Conditional padding is the technique Litmus uses in its own campaigns and the safest default for an html email button. All styling sits on the anchor tag, so the whole rectangle is clickable, and the conditional comment supplies spacing Outlook would otherwise collapse.

<a href=”https://example.com/consultation” style=”background-color:#1F5EFF; border-radius:6px; color:#ffffff; display:inline-block; font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; line-height:20px; padding:14px 28px; text-decoration:none; mso-padding-alt:0;”> <!–[if mso]>&emsp;<![endif]–> Book your consultation <!–[if mso]>&emsp;<![endif]–></a>

Three details make this an email link button rather than a web button dropped into an email. Inline-block display lets padding create the shape. The mso-padding-alt declaration stops Outlook applying its own padding on all four sides. The hidden italic tags widen the clickable area in Outlook. For newsletter buttons that stretch on small screens, add a media query setting the anchor to display:block.

Button size and placement best practices

A button that renders correctly can still be hard to hit. WCAG 2.2, a W3C Recommendation since December 2024, sets the floor: Success Criterion 2.5.8 requires pointer targets of at least 24 by 24 CSS pixels at Level AA, and 2.5.5 raises that to 44 by 44 at Level AAA. Apple’s Human Interface Guidelines agree, specifying a 44-point minimum tappable area.

For email specifically, Litmus recommends a height between 42 and 72 pixels. Below that range buttons get missed on a phone; above it they stop reading as buttons. Roughly 48 pixels with generous horizontal padding satisfies the guidance and looks deliberate on desktop.

Spacing matters as much as size, since crowded buttons invite mis-taps even when each is large enough alone. Keep the primary action visible before the reader scrolls, and make sure the rest of your template follows best practices so the button is not competing with an oversized header.

Writing CTA copy that gets clicked

Strong CTA email copy tells the reader what happens next in the fewest words that still carry meaning. Litmus recommends keeping the label between one and five words. Four rules cover most cases:

Name the outcome, not the mechanism: “Book your consultation” beats “Submit”.
Start with a verb. A call to action button email works when the label reads as an instruction.
Give one email one primary action. A second button competing for the same click usually reduces both.
Match the label to the landing page; mismatches train people to stop clicking your email CTA.

How to make a phone number clickable in an email

A clickable phone number is an anchor tag whose href uses the tel: scheme instead of a web address. The reader taps it and the dialer opens with the number filled in.

Formatting inside the href is where most implementations go wrong. RFC 3966, the IETF specification for the tel: URI, states that globally unique numbers are identified by a leading plus sign and composed with the country code, and that on a public HTML page the number should always appear in global form even when the visible label uses a local format.

<!– In the <head> of your template –><meta name=”format-detection” content=”telephone=no”> <!– In the body –><a href=”tel:+12125550101″ style=”color:#1F5EFF; font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; text-decoration:underline;”> Call us at (212) 555-0101</a>

The format-detection tag does the opposite of what its placement suggests. Apple’s Safari HTML Reference documents it as an Apple extension: Safari on iOS turns any string resembling a phone number into a call link by default, and telephone=no disables that. It stops iOS auto-linking order numbers and dates, while your explicit tel: link keeps working and keeps its styling.

To present the phone number in email as a button, wrap the tel: href in the button code above. Note from Litmus: Gmail ignores clickable phone number styles declared in the head, so keep them inline.

Click-to-call behavior across devices and clients

A tel: link does not behave identically everywhere. Treat the table below as typical behavior rather than a guarantee, since outcomes shift with the operating system version and with the app the recipient set as their default handler.

Device or client	Typical behavior	What to plan for
iPhone and iPad	Opens the dialer, waits for confirmation	Safest case; the tap is reversible
Android phones	Opens the dialer with the number filled in	Auto-linking may restyle numbers you did not link
Apple Mail on macOS	Typically hands the call to FaceTime	Without FaceTime set up, nothing may happen
Outlook and Gmail on desktop	Passes to the default tel: handler, such as Teams	With no handler set, the click fails silently
Any client, images off	The link still renders, being live text	Only if the number is not inside an image

The macOS case surprises people. Litmus warns senders with a large Apple Mail audience that click-to-call on a Mac opens FaceTime, a different experience from a dialer.

Pro Tip: Hide the click-to-call link on desktop with a media query and show a scheduling link instead. Litmus documents this pattern, and it keeps mobile frictionless without stranding desktop readers in an app they never set up.

When to use a clickable phone number (and when not to)

Click-to-call earns its place when the reply you want is a conversation and speed decides the outcome. Litmus points to several cases where it works.

Support and service recovery, where a frustrated customer will not wait for email.
Returns and order problems, faster to resolve by voice than through a web form.
Consultations and booked calls, where the number is the offer, not a footer detail.
Post-purchase feedback, where a short call yields more than a survey link.

Skip it in two cases. If your team cannot absorb the call volume, the button sends people into a hold queue. And in cold outreach, an unsolicited invitation to call a stranger rarely converts.

Common mistakes that hurt deliverability and UX

Several button and phone-number habits create problems that reach beyond design.

Putting the call to action inside an image, which fails for anyone with images off.
Making only the label clickable rather than the full button area.
Writing the tel: href with parentheses, spaces, or no country code.
Stacking three or four buttons so no single action stands out.
Skipping alt text on remaining images, removing the last fallback.
Relying on a heavy image-to-text ratio, which content filters weigh.
Leaving auto-detected numbers unstyled, so iOS turns reference codes into blue call links.

The deliverability connection is more specific than is usually described. A broken button does not directly damage sender reputation, and Google does not publish click-through rate as a reputation input. What Google does publish is a threshold on user-reported spam: its sender guidelines instruct senders to keep the Postmaster Tools spam rate below 0.10% and never let it reach 0.30%.

A recipient who wants to act and finds nothing that works is likely to delete or report the message, and enough of those reports move the metric providers actually enforce.

Warmy’s deliverability insights cover the monitoring side, from domain reputation to blacklist status and authentication records.

Pre-send testing checklist

Work through this list before any campaign that depends on a click or a call.

Preview with images disabled; confirm every call to action is visible.
Tap the full button area, not only the label, on an iPhone and an Android device.
Open the message in Outlook desktop and check that padding is held.
Send a test to a Gmail address and confirm the phone number styling survived.
Verify the tel: href uses a leading plus sign, the country code, and digits only.
Confirm the format-detection tag is present if the email has order numbers or dates.
Run a screen reader over the message and hear how each call to action is announced.
Check that every button opens the destination its label promises.

Warmy’s free Template Checker automates part of this, scanning your HTML and content for the issues filters react to. A Chrome extension lets you test inside your existing workflow.

Conclusion

Bulletproof email buttons and click-to-call links solve the same problem from two directions, replacing a fragile graphic with live text that renders everywhere and gives assistive technology something to work with.

Getting the email button right only pays off if the message reaches the inbox. Warmy builds and protects the sender’s reputation, which determines whether your campaign is delivered at all, using AI-driven warm-up, domain-level health monitoring, and inbox placement testing. Book a demo and see how Warmy protects your inbox placement before your next send.