email-button

email-button

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center">
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#e9703e">
          <a href="https://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #e9703e; display: inline-block;">
          I am a button &rarr;</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design

4. PADDING + BORDER-BASED BUTTONS

The padding and border-based buttons combine elements of the previous two approaches.

Essentially, this approach uses the same structure of styling the link with both padding and at least a solid 1px border. Then, a background color is applied to the to fill the entire background of the link. The background color needs to be applied to the instead of the in this instance because Outlook does recognize horizontal padding on the tag (since it does not support such styling for non block-level HTML elements).