Create buttons with rounded corners for emails – How to

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.

The code:

<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>

The Codepen:

See the Pen Rounded Corner Button for Outlook by Jamie (@studiotwofold) on CodePen.

Source: https://buttons.cm