填充基於邊框的按鈕

此技術使用基於邊框和基於填充的按鈕的組合,使用填充和至少實心 1px 邊框設定連結樣式。需要將背景顏色應用於而不是在此例項中,因為 Outlook 確實識別標記上的水平填充(因為它不是塊級別標記)。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#0095FF"><a href="https://www.stackoverflow.com" target="_blank" style="font-size: 14px; font-family: 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 #0095FF; display: inline-block;">Stack Overflow</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

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

填充+基於邊框的按鈕的缺點是它將 <td><a> 標籤之間的樣式分開,因此可能難以維護。但只使用一個按鈕,不需要特定尺寸,並且可以支援背景影象。