Rounded corners CTA buttons that work in all email clients including Outlook
I've been trying for a while to figure it out a way to have rounded corners working in all email clients and all devices but only recently I nailed it. The code from my last article works but there were still a couple of places like Outlook 2003 where it didn't. If you ever wanted this to work and who doesn't, you have come to the right place.
The only think I am still working on finding a solution for is how can I make the dark mode in Outlook to not interfere and change the text background.
But for now, let's round it up, pun intended.
This method is somehow similar to https://buttons.cm/ but we won't use a background image for the button. Instead we will fill the button with a solid color, in this case red. I think we can all agree that red will bring the most attention and clicks so why not using it.
This is the code with notes below:
<!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://google.com" style="height:50px;v-text-anchor:middle;width:200px;" arcsize="30%" stroke="f" fillcolor="#FF0000"> <w:anchorlock/> <center><![endif]--> <a href="http://google.com" style="background-color:#FF0000;border-radius:20px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;-webkit-text-size-adjust:none;width:200px;" target="_blank">CLICK HERE</a> <!--[if mso]></center> </v:roundrect> <![endif]-->
As you can see to have the button with round corners, we needed to use roundrect which stands for round rectangle in the Microsoft world. That will do it for Outlook. We also needed to use hard coded height and width. Be careful with that and always leave some extra room just in case an email client decided to add extra letter spacing or show a larger font. For the radius we used arcsize for Microsoft Outlook and border-radius for everyone else.
v-text-anchor:middle for Outlook or valign="middle" for the rest of the world, belongs to VML, a feature that is deprecated for web as of Internet Explorer 9 but still going strong in email newsletters. Go figure, hello 2020! Also if you haven't google yet, fillcolor is equal to background-color or simple background in modern email clients.
Basically all the code on the v:roundrect is specifically coded for Microsoft Outlook.
This works in all email clients including Outlook and on all devices. It just feels great to be able to get off image based CTA buttons and be able to use text instead. Additionally you can also check my other article about creating rounded corners buttons for emails that I wrote in May this year. The major difference is that the present article uses tables while the old one is much simpler. The drawback is the old method might not work everywhere.
Try both and see what works better for you. Don't forget, always test. As always, Litmus and Email on Acid are your best friends.
In the inboxes I tested, I also noticed, the whole entire cell is clickable and not just the text link. That is a great thing.
As you can guess, this method could be applied not just for buttons but for everything that is supposed to have rounded corners. Let me know how it works for you.
Till next time, all the best from your email developer friend, the email snob.