Fast way to code rounded CTA buttons in email newsletters

The idea of having an email look like a webpage is not new. All email developers are front end developers in their heart. So we naturally like and want rounded CTA buttons in emails as much as we want them for websites.

While rounded buttons are doable in email newsletters, there is a catch: Outlook does't work with display block on <a> tags, meaning the full buttons won't be clickable. Now, don't be mad at me, take it up with Microsoft!

Anyway, let's get back at making round corners CTA buttons in emails. The trick is to have radius applied on both the table cell and the <a> tag.

You will have this on the TD:
style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;"

And this style on the <a> tag:
style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #e9703e; display: inline-block;"

As you can see, I used display:inline-block; This will help having the link occupying the full width and height of the table cell so when the user hovers the button it will be all clickable but not in Outlook unfortunately. 

Here is the full code for you to use:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
 xmlns:o="urn:schemas-microsoft-com:office:office">
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <!--[if gte mso 9]>
    <xml>
       <o:OfficeDocumentSettings>
          <o:AllowPNG/>
          <o:PixelsPerInch></o:PixelsPerInch>
       </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
    <style type="text/css">
       @media only screen and (max-width: 599px){
       table {width:100% !important; background:#ffffff !important; min-width:100% !important;} /*force white background on tables on some versions of android*/
       }
    </style>
 </head>
 <table>
    <tr>
       <td style="border-collapse: collapse;">&nbsp;</td>
       <td style="border-collapse: collapse;" align="center">
          <table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:250px" width="250" border="0" cellspacing="0" cellpadding="0" align="center" class="button">
             <tr>
                <td>
                   <table width="250" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;width:250px !important; max-width:250px !important;min-width:250px !important;" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                         <td width="250" align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#e9703e"><a href="#" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #e9703e; display: inline-block;">Apply now</a></td>
                      </tr>
                   </table>
                </td>
             </tr>
          </table>
       </td>
       <td style="border-collapse: collapse;">&nbsp;</td>
    </tr>
 </table>
</html>

One thing to note here is the width I used on the wrapper tables and the table cell. Because I use a fluid responsive approach when coding newsletters, all my tables span at full width of the email. But here we need the CTA button to be 250px wide.

In order to do that we need to enforce it somehow so my way to do it is by adding  width="250" in the tables (notice I also added width:250px on the first table wrapper to fix the Outlook DPI scaling) and also also using max-width:250px !important;min-width:250px !important;.

This will ensure the CTA buttons will stay at 250px on any screen or in any email client.

Happy email coding! Your friend, the email snob.