基于边框的按钮

此技术依赖于为链接本身添加粗边框以构建按钮的 CTA。电子邮件客户端普遍理解使用边框,但限制按钮外观纯色。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td bgcolor="#0095FF" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="http://www.stackoverflow.com" target="_blank" style="font-size: 14px; font-family: sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Stack Overflow</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

https://i.stack.imgur.com/bE0S2.jpg

链接标记设置为块级元素,并且边框用于提供填充,因此即使在较旧的桌面客户端中,整个按钮也可以缓存+可点击。

基于边框的按钮的缺点是 Outlook 会将边框的大小减小一些,如上所述,不支持背景图像。