email Bulletproof Buttons Padding-Based Buttons


Example

This technique relies on padding at the table cell level to structure the button, and both HTML attributes and CSS to style the button. No VML means simpler code, but no background images in Outlook.

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

enter image description here

The drawback of padding-based-buttons is that the entire area of the button is not clickable, only the link within the table cell is.