{"id":8735,"date":"2026-08-12T23:42:35","date_gmt":"2026-08-12T23:42:35","guid":{"rendered":"https:\/\/www.warmy.io\/blog\/?p=8735"},"modified":"2026-08-20T02:31:35","modified_gmt":"2026-08-20T02:31:35","slug":"clickable-phone-numbers-buttons-html-email","status":"publish","type":"post","link":"https:\/\/www.warmy.io\/blog\/email-best-practices\/clickable-phone-numbers-buttons-html-email\/","title":{"rendered":"Clickable Phone Numbers & Buttons in HTML Email: A Click-to-Call Guide"},"content":{"rendered":"\n

TL;DR:<\/strong> Relying on image-based buttons can silently ruin your email conversions if an email client blocks images. This guide by Warmy provides the paste-ready HTML\/CSS code to build reliable “bulletproof buttons” that render perfectly everywhere, plus the essential tweaks to format phone links correctly and stop iOS from turning order numbers into accidental calls.<\/p>\n\n\n\n

Your subject line earns the open, and your copy earns the interest. But when the reader finally reaches the point of action, they often find a gray rectangle with a broken image icon where your email button should be. The solution is a bulletproof button.<\/strong> Rather than an image, this is a call to action coded entirely in HTML and CSS to display perfectly in every email client. <\/p>\n\n\n\n

By styling an anchor tag with padding, a background color, and conditional Outlook markup, you ensure the entire rectangle is clickable. Of the five reliable techniques, conditional padding<\/strong> is the one to reach for by default.<\/p>\n\n\n\n

Phone links break differently, but just as quietly.<\/strong> The href<\/code> must carry a leading plus sign and the country code. Additionally, a format-detection meta tag is essential to stop iOS from turning standard order numbers into accidental call links.<\/p>\n\n\n\n

Warmy is an AI-driven email warm-up and deliverability platform that helps senders reach the primary inbox and stay there. This guide covers these two frequently miscoded HTML email elements, providing clean code you can paste straight into your template.<\/p>\n\n\n\n

\"A<\/figure>\n\n\n\n

Why image-based buttons fail in email<\/h2>\n\n\n\n

Image-based buttons fail in email because they disappear for anyone reading with images blocked and hand a screen reader nothing to announce beyond your alt text. An image is the only way to guarantee a button looks identical everywhere, which is why designers keep reaching for one, and Litmus still advises against it: that guarantee holds only for recipients with images switched on who aren’t using assistive tech.<\/p>\n\n\n\n

When Gmail began loading images automatically at the end of 2013, Litmus compared open rates before and after and found that 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, which makes it evidence that image blocking was once widespread rather than a current measurement.<\/p>\n\n\n\n

What is a bulletproof button?<\/h2>\n\n\n\n

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, which differ in where the styling lives and how each one degrades in Outlook, whose desktop versions ignore rounded corners and handle horizontal padding inconsistently.<\/p>\n\n\n\n

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

One caveat applies to VML. Litmus notes that it introduces accessibility complications and now recommends moving away from it, which turns rounded corners in Outlook into a preference rather than a requirement.<\/p>\n\n\n\n

How to code a bulletproof button (copy-paste HTML)<\/h2>\n\n\n\n
<\/figure>\n\n\n\n

Conditional padding is the technique Litmus uses in its own campaigns and the safest default for an HTML email button. All the styling sits on the anchor tag, which keeps the whole rectangle clickable, and the conditional comment supplies the spacing Outlook would otherwise collapse.<\/p>\n\n\n\n

<a href=\"https:\/\/example.com\/consultation\" class=\"btn\"\n   style=\"background-color:#1F5EFF; border-radius:6px; color:#ffffff;\n          display:inline-block; font-family:Arial, Helvetica, sans-serif;\n          font-size:16px; font-weight:bold; line-height:20px;\n          padding:14px 28px; text-decoration:none; mso-padding-alt:0;\">\n \n  <!--[if mso]>\n  <i style=\"mso-font-width:100%; mso-text-raise:26pt\" hidden>&emsp;<\/i>\n  <span style=\"mso-text-raise:13pt;\">\n  <![endif]-->\n \n  Book your consultation\n \n  <!--[if mso]>\n  <\/span>\n  <i style=\"mso-font-width:100%;\" hidden>&emsp;&#8203;<\/i>\n  <![endif]-->\n \n<\/a><\/code><\/pre>\n\n\n\n
Three details separate this from a web button dropped into an email. Inline-block display lets the padding create the shape. The mso-padding-alt declaration stops Outlook from applying its own padding on all four sides. And the hidden italic tags, which look like clutter until you test without them, are what widen the clickable area in Outlook.<\/p>\n\n\n\n
For newsletter buttons that should stretch on small screens, add a media query that switches the anchor to display block:<\/p>\n\n\n\n
<style>\n  @media only screen and (max-width: 480px) {\n    .btn {\n      display: block !important;\n      width: 100% !important;\n      text-align: center !important;\n    }\n  }\n<\/style><\/code><\/pre>\n\n\n\n
Button size and placement best practices<\/h2>\n\n\n\n
\"Button<\/figure>\n\n\n\n
Build email buttons at roughly 48 pixels tall with generous horizontal padding, and keep the primary one visible before the reader scrolls. A button that renders correctly can still be hard to hit, which is what the accessibility guidance addresses.<\/p>\n\n\n\n
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. <\/p>\n\n\n\n
For email specifically, Litmus recommends a height between 42 and 72 pixels because buttons below that range get missed on a phone, and buttons above it stop being read as buttons at all.<\/p>\n\n\n\n
Spacing matters as much as size. Crowded buttons invite mis-taps even when each one is large enough on its own, and making sure the rest of your template follows best practices<\/a> keeps the button from competing with an oversized header.<\/p>\n\n\n\n
Writing CTA copy that gets clicked<\/h2>\n\n\n\n
Strong CTA email copy tells the reader what happens next in the fewest words that still carry meaning, and Litmus recommends keeping the label between one and five words. Four rules cover most cases:<\/p>\n\n\n\n