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]-->

Looking for a lighter framework for your next project? Here's a list of some of the best minimal CSS frameworks out there.

https://hakanalpay.com/bahunya/
Dark mode based on tacit

https://github.com/yegor256/tacit

https://purecss.io/
Pure builds on Normalize.css and provides layout and styling for native HTML elements, plus the most common UI components. It’s what you need, without the cruft.

🔗 https://picturepan2.github.io/spectre/index.html
Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.

https://andybrewer.github.io/mvp/
MVP styles your root HTML elements, so you don’t need to learn a new CSS framework or naming conventions.
It’s like an amped up CSS reset that you can toss into any project to get decent styling.

https://newcss.net/
new.css is a classless CSS framework to write modern websites using only HTML.

https://github.com/oxalorg/sakura
Wonderful for people not really good or interested with design as sakura is nothing but a set of reasonable defaults

https://watercss.kognise.dev/
Now you can write your simple static site with nice semantic html, and Water.css will manage the styling for you.

https://jenil.github.io/chota/
Magical 12 column grid
Comes with a handful of components & utilities

http://getskeleton.com/
You should use Skeleton if you're embarking on a smaller project or just don't feel like you need all the utility of larger frameworks. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started. In fact, this site is built on Skeleton and has ~200 lines of custom CSS (half of which is the docking navigation).