Create buttons with rounded corners for emails – How to
A simple way to create buttons with rounded corners that work in all email clients, including the nefarious Outlook family.
March 3, 2020
The other week I had a client who was insistent on having their rounded buttons in their new HTML Mailchimp template. After spending way too long tearing my hair out trying to get it working in all clients, I stumbled across the below hack.
The below code is a simple way of creating these buttons. The only downside is that the button URL needs to be inserted twice: once into the VML script, and once into the standard HTML.
<div align="center"> <!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://studiotwofold.com.au" style="height:36px;v-text-anchor:middle;width:200px;" arcsize="50%" stroke="f" fillcolor="#FC4C02"> <w:anchorlock/> <center> <![endif]--> <a href="https://studiotwofold.com.au" style="background-color:#FC4C02;border-radius:18px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:36px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">Here is your button!</a> <!--[if mso]> </center> </v:roundrect> <![endif]--></div>