防彈按鈕與墊片
此按鈕源於此示例中的 Email on Acid。它完全基於程式碼,因此在沒有下載影象的情況下顯示,整個按鈕可以移動+可點選。
此外,此示例還包括用於幫助控制按鈕前後出現多少垂直空間的墊片。
<table width="100%">
<tr>
<td>
<!-- Top Spacer : BEGIN -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
</td>
</tr>
</table>
<!-- Top Spacer : END -->
<!-- Button : BEGIN -->
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left">
<table border="0" cellpadding="0" cellspacing="0" width="150">
<tr>
<td align="center" bgcolor="#0077CC" width="150" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;">
<a href="http://www.stackoverflow.com" style="padding: 10px; width:150px; display: block;text-decoration: none; border:0;text-align: center; font-weight: bold; font-size: 14px; font-family: sans-serif; color: #ffffff; background: #0095FF;border: 1px solid #0077CC; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; line-height:17px;" class="button_link">Stack Overflow</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!-- Button : END -->
<!-- Bottom Spacer : BEGIN -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
</td>
</tr>
</table>
<!-- Bottom Spacer : END -->
</td>
</tr>
</table>