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 <a> in this instance because Outlook does not recognize horizontal padding on the <a> tag (since it does not support such styling for non block-level HTML elements).

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center" style="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;border-radius: 3px; padding: 12px 18px; border: 1px solid #e9703e; display: inline-block;">I am a button →</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Horizontal Padding Hack for Outlook
A quick hack that can be used to increase the horizontal “padding” for Outlook is to conditionally add inline non-breaking space(s) on each side of the link.

<!--[if mso]> <![endif]-->