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.

Round buttons for emails coding

Featured Image

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="" style="height:36px;v-text-anchor:middle;width:200px;" arcsize="50%" stroke="f" fillcolor="#FC4C02">
    <a href=""
    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]>

The Codepen:

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


Similar Posts

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *