In addition to this, rounded corners in webmail clients require that the browser supports border-radius. And background images may get blocked in some email clients.
Unsurprisingly, the main motivation for this tool was Outlook 2007/2010/2013. I’ve often wanted to code buttons that look nice in Outlook, but I kept running into different issues. Outlook doesn’t let you add padding to links, or render them as a block element with a width or height. You can wrap links around spacer tables, but that usually seems to disable the link click in Outlook.
By digging through some markup generated by Word, I discovered that VML shapes can have an href attribute. And with a bit (OK, heaps) of trial and error, I found a pretty good way to wrap a basic VML rectangle around a styled link, and set the same href URL on both.
The result, as rendered in Outlook, was an inline HTML link, centered horizontally and vertically inside a fixed size VML rectangle. The inner HTML link only has a background color in a small box around the text, but this blends seamlessly with the background color of the VML rectangle. In other email clients, the VML is hidden using conditional comments, and the styled HTML link renders very consistently across other popular email clients.
From there, I wanted to add rounded corners. In the HTML/CSS version, I decided to only use the border-radius property and no vendor prefixes. You can add them if you feel strongly about it. Rounding the corners in the VML involves two changes. Replacing v:rect with r:roundrect, and adding the arcsize attribute.
Rather than a pixel radius, the ArcSize is defined as a percentage of the shortest side of the shape. For example, if a rounded rectangle is 40px tall, a 4px radius is 10%. This tool makes the assumption that the button is at least as wide as it is tall.
Adding a border and background image turned out to be a slightly trickier challenge, requiring an even hackier solution. Since the background color and border are also applied to the smaller inner link in Outlook, this doesn’t look right when placed on top of the outer shape.
So instead of using the same link text inside both the VML and HTML buttons, buttons with borders or background images are coded as separate VML and HTML elements with opposite conditional comments.
I have yet to find a way to make Outlook render thin, sharp borders, so expect them to be a little blurry.
If you are inserting multiple buttons beside or below each other especially, you’ll want to pay some attention to how the buttons are positioned and spaced. The HTML buttons are styled with display: inline-block; so that they’ll behave somewhat similar to the VML ones. The <w:anchorlock/> tag makes the VML buttons behave better together, but if you’re only using one, you can remove <w:anchorlock/> and xmlns:w="urn:schemas-microsoft-com:office:word".
If you're adding several buttons however, you can move xmlns:v="urn:schemas-microsoft-com:vml" and xmlns:w="urn:schemas-microsoft-com:office:word" attributes from the individual VML shapes to the <html> element instead, to tidy things up. This will then ensure that the VML and Word behavior is applied to all relevant elements in the document.
As the above list indicates, not everything works perfectly everywhere. Some email clients remove either the rounded corners or the background image, and there are also browsers that don’t support the border-radius attribute. In addition to this, the background image is subject to image blocking, so as always, chose a good fallback color.
There are also a few ancient email clients which will even ignore the background color, so you may want to choose a font color which is different from the email background. But other than that, you’ll be able to design buttons which look gorgeous in most email clients, and still highly click-worthy otherwise.