防弹按钮与垫片
此按钮源于此示例中的 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>