Anyone who has ever coded an email template from scratch can tell you the headache that comes with it. Coding an email is basically like coding a website ten or fifteen years ago.
Tables. Literally everything is tables.
Now, it is better as of late. Email clients that are web based, and email apps, both have pretty great support compared to years past. However, there is still that one cloud that hangs over anyone that codes an email template: Outlook.
Microsoft Outlook on Windows is probably the single-most frustrating thing I’ve ever had to work with in my life. There are many quirks for coding an email to look good in Outlook, but the one thing we are going to talk about today is something I had to deal with recently.
Rounded button links. You know, those buttons you usually just slap border radius and padding on and are good to go.
Majority Client Coding
<tr>
<td>
<a href="" target="_blank" style="font-family: Helvetica, Arial, sans-serif; display: inline-block; color: #fff; background-color: #f00; font-weight: 600; line-height: 45px; text-align: center; text-decoration: none; padding: 0 35px; border-radius: 25px">Button Text Here</a>
</td>
</tr>
Pretty standard stuff, right?
In case you haven’t created an email template, CSS is inline due to client support for external CSS being virtually non-existent. The inline style tag is best used for progressive enhancement as its support is minimum as well. Looking at the CSS itself, it’s pretty standard stuff, right? Font stuff, text align, padding, and border radius.
I’ve found line height to offer more consistent results than adding top and bottom padding (for email specifically), which is why it is set to 45 pixels. That is also why there is no top or bottom padding on the element.
In most clients, this produces the desired result of a red button that has rounded corners. You know, like border radius is supposed to do.
See the Pen Email Rounded Button Example – Most Email Clients by Kyle Hawk (@Krazyhawk) on CodePen.
All good, right?
…right?
Well no, because you are about to get an email from someone in your office saying the button looks off on their computer. You’ll ask what client they are using, and then you’ll shutter as you read the response of “Microsoft Outlook”.
See the Pen Email Rounded Button Example – Outlook Visual Example by Kyle Hawk (@Krazyhawk) on CodePen.
Chances are the button looks something like the above in Outlook clients. Yikes.
Coding For Outlook
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:45px;v-text-anchor:middle;width:285px;" arcsize="56%" stroke="f" fillcolor="#f00">
<w:anchorlock/>
<center>
<![endif]-->
<tr>
<td>
<a href="" target="_blank" style="font-family: Helvetica, Arial, sans-serif; display: inline-block; color: #fff; background-color: #f00; font-weight: 600; line-height: 45px; text-align: center; text-decoration: none; padding: 0 35px; border-radius: 25px">Button Text Here</a>
</td>
</tr>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
Well, that’s a whole lot more code just for a button. Let’s talk about what it actually does.
First, we have the [if mso] conditional. This is a comment conditional that will only be read by Outlook clients. If you ever had to deal with older Internet Explorer versions, this will look familiar. Normal clients see this as a comment, and will skip over it.
After that is a VML, or Vector Markup Language, declaration for a rounded rectangle. I don’t know much about VML myself, but it’s an old markup language that was used by Microsoft back in the day. It is no longer supported on the web, their documentation for it being archived back in December of 2011.
However, it is still useful for Outlook!
In the VML tag there are a couple of key things: the style attribute and the arcsize attribute. Within the style attribute, there needs to be a declaration of height and width. Both are required. The arcsize attribute is the border radius percentage, that’s where we get our curve.
Nice.
Downside
There is really only one major con to this method, and that’s the height and width declarations. You can not have a dynamic width, it has to be fixed. That means that no matter the text you have in there, the button around it will remain the same size.
It’s worth noting that while using this method in the real world, I found that some Outlook clients will collapse the button and make the text unreadable. I was never able to personally reproduce the error, but I did have people notify me of it.
If you have text that runs outside of the button, it will be cut off. As far as I know, there is no way around this.
Another minor drawback is that you can’t have a hover color, but that’s not that big of a deal. I mean, only some of the email clients support the style tag to be able to do that anyway.
Conclusion
So there you have it. That’s my way of getting rounded button links to show up in all versions of Outlook. Thus far, I haven’t had any issues with it. I haven’t gotten any emails yelling at me that something is wrong either, so that’s good.
Know a better way to do it? Let me know, I love learning.
Thanks for reading, and hope this helps someone out there.