Padding not showing on HTML buttons in emails in Outlook
In this post, I describe a way to put padding on HTML buttons in emails when displayed in Microsoft Outlook.
Outlook not showing padding
To add a button in HTML to an email, normally you’d just use an a tag with some padding and a background-color, etc:
<a href="https://howardsimpson.blogspot.com" style="background-color: #4f7c1f; color: #ffffff; text-align: center; text-decoration: none; padding: 14px 20px 14px 20px;" >View Blog</a>
Unfortunately, Microsoft Outlook ignores the padding and displays the button without it:
Resolution
To resolve this issue, you can use a filled rectangle in a table cell to create the padding around the text in the button in Outlook.
The filled rectangle only works in Outlook, so it needs to be put in an Outlook conditional comment (if mso). The a tag is included in the table cell but outside the Outlook conditional comment so that the button is shown in other email platforms.
Here is the code:
<!--[if mso]>
<table width="100%" align="center" border="0"
cellpadding="0" cellspacing="0"
style="border-spacing:0;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
<tr>
<td>
<a:roundrect xmlns:a="urn:schemas-microsoft-com:vml"
xmlns:w="urn:schemas-microsoft-com:office:word" href="https://howardsimpson.blogspot.com"
fillcolor="#4f7c1f" arcsize="8%"
style="v-text-anchor:middle;width:91.5pt;height:36.75pt;"
stroke="f"><w:anchorlock/>
<a:textbox inset="0,0,0,0">
<center style="color:#ffffff; font-family:Calibri,sans-serif;
font-size:16px">
<![endif]-->
<a href="https://howardsimpson.blogspot.com" style="display: inline-block; background-color: #4f7c1f; color: #ffffff; line-height: 1.3; margin: 0; text-align: center; text-decoration: none; text-transform: none; padding: 14px 20px 14px 20px; mso-padding-alt: 0px; border-radius: 4px; box-shadow: 0px 2px 3px #b0b0b0; mso-border-alt: none; box-sizing: content-box; font-family: Calibri,sans-serif;" target="_blank">View Blog</a>
<!--[if mso]>
</center>
</a:textbox>
</a:roundrect>
</td>
</tr>
</table>
<![endif]-->The colour of the filled table cell is controlled by the fillcolor attribute on the round rectangle element a:roundrect. The width and height are controlled by the width and height styles of a:roundrect.
The button text colour, font family and font size are controlled by the color, font-family and font-size styles of the center element.
The button displays as expected in Outlook even if the scaling settings are increased in Windows and the entire button is clickable, not just the text:
Comments
Post a Comment