Cross Client Email Call to Action (CTA) buttons without images

cta-buttons-cross-client-email.html

<!-- 
  Cross client CTA buttons in email
  Originally taken from: http://www.industrydive.com/blog/how-to-make-html-email-buttons-that-rock/
  
  Additions and modifications made due to certain behaviours in email clients
-->

<!-- 
  Method #1: Buttons that span the entire space with fixed width/height/line-height
  
  ** Anchor cover entire visisble area
  ** Windows Phone with EAS can be iffy with fixed width
  ** The anchor in Outlook won't cover the entire area
-->

<table cellspacing="0" cellpadding="0"> 
  <tr> 
    <td align="center" width="300" height="40" bgcolor="#000091" style="font-family: Helvetica, Arial, sans-serif; font-size:16px; font-weight: bold; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: block;">
      <a href="http://www.EXAMPLE.com/" target="_blank" style="text-decoration: none; line-height:40px; width:100%; display:inline-block; color:#fffffe;">
        <span style="color:#fffffe;">Awesome Email Button</span>
      </a>
    </td> 
  </tr> 
</table>

<!-- Improved support for Outlook when using DPI scaling, adding matching width and height via style property -->

<table cellspacing="0" cellpadding="0"> 
  <tr> 
    <td align="center" width="300" height="40" bgcolor="#000091" style="font-family: Helvetica, Arial, sans-serif; font-size:16px; font-weight: bold; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: block; width:300px; height:40px;">
      <a href="http://www.EXAMPLE.com/" target="_blank" style="text-decoration: none; line-height:40px; width:100%; display:inline-block; color:#fffffe;">
        <span style="color:#fffffe;">Awesome Email Button</span>
      </a>
    </td> 
  </tr> 
</table>

<!-- 
  Method #2: Faux buttons, have a similar apperance but the anchor space doesn't span the entire visible area
  
  ** Uses padding rather than fixed size values to create the button
  ** Generally more friendly to all clients
  ** Anchor doesn't cover the entire space
-->

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" valign="middle" bgcolor="#000091" style="font-family: Helvetica, Arial, sans-serif; font-size:16px; font-weight: bold; padding-top:15px; padding-right:35px; padding-bottom:15px; padding-left:35px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;" class="cta-button">
      <a href="http://www.EXAMPLE.com/" target="_blank" style="text-decoration:none; color:#fffffe;">
        <span style="color:#fffffe;">Awesome Email Button</span></a>
    </td>
  </tr>
</table>

<!-- 
  Improved Outlook Support: Rather than using table cells and anchors, VML can be used to create the same shapes
  
  ** Special markup language only Outlook understands
  ** Create various shapes, where the anchor can cover the entire space
  ** Requires conditional logic to implement properly
-->

<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.EXAMPLE.com/" style="height:40px;v-text-anchor:middle;width:300px;" arcsize="10%" stroke="f" fillcolor="#d62828">
  <w:anchorlock/>
  <center style="color:#ffffff; font-family: Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold;">
    Awesome Email Button
  </center>
</v:roundrect>

<!-- 
  Using conditional logic: When using the VML method, you must conditionally combine either method #1 or #2 with it.
  
  ** VML code is rendered by all Outlook desktop clients
  ** All other non Outlook clients use the table CTA button
  ** Using mso-hide:all; will hide the table CTA button from Outlook desktop clients.
  
  You should not use a !mso conditional to hide the non Outlook code because Outlook.com will remove all content in conditional comments.
  See why: https://gist.github.com/jamesmacwhite/18e97b06f2c04661a757
-->

<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.EXAMPLE.com/" style="height:40px;v-text-anchor:middle;width:300px;" arcsize="10%" stroke="f" fillcolor="#d62828">
  <w:anchorlock/>
  <center style="color:#ffffff; font-family: Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold;">
    Awesome Email Button
  </center>
</v:roundrect>
<![endif]-->

<table border="0" cellpadding="0" cellspacing="0" style="mso-hide:all;">
  <tr>
    <td align="center" valign="middle" bgcolor="#000091" style="font-family: Helvetica, Arial, sans-serif; font-size:16px; font-weight: bold; padding-top:15px; padding-right:35px; padding-bottom:15px; padding-left:35px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;" class="cta-button">
      <a href="http://www.EXAMPLE.com/" target="_blank" style="text-decoration:none; color:#fffffe;">
        <span style="color:#fffffe;">Awesome Email Button</span>
      </a>
    </td>
  </tr>
</table>

<!-- Note: If you need to hide a table that happens to have nested table(s) within, you must apply mso-hide:all; to all subsequent tables -->