添加动态链接/按钮到电子邮件（从Web应用程序发送）

Question

任何人设法制作简单的按钮样式，可以用来制作类似下面的按钮？我有一个电子邮件系统，它会在发送之前添加动态链接，而且我很难生成适用于我在这里的任何格式的HTML。我正在测试的两个是Hotmail和Outlook 2010。

这是我第一次涉足电子邮件css，并没有意识到它在可用CSS方面有多么有限。

到目前为止，我已尝试将这些作为标记上的内联样式：

font-family:Arial; 
background:#025798; 
font-size:16px; 
color:#ffffff; 
text-align: center; 
text-decoration:none; 
margin: 5px 10px 5px 10px; 
padding: 5px 10px 5px 10px;

但是我发现边距和填充没有得到很好的支持，宽度和高度也被剥离了。我甚至尝试将它们添加为td中a的表格，但可以预见的是，它也无效。

有人试图这样做吗？

Answer 1

以下是您用于按钮的html示例：

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="merchandiseButton">
  <tr> 
     <td align="center" valign="middle" class="merchandiseButtonContent">
        <a href="#" target="_blank" title="">Purchase</a>
     </td>
  </tr>
</table>

这是内联css风格：

.merchandiseButton{background-color:#D83826;}
.merchandiseButtonContent, .merchandiseButtonContent a{color:#F0F0F0; font-size:16px; font-weight:bold; line-height:100%; letter-spacing:-1px; padding:10px; text-align:center; text-decoration:none;}

这是一个很好的列表，可以查看每个电子邮件客户端的css和不支持的内容： http://www.campaignmonitor.com/css/

Answer 2

你应该避免保证金。这样的东西对你有用：

<table width="200" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="50" align="center" valign="middle" bgcolor="#025798" style="font-family: Arial, Helvetica, sans-serif; font-size: 28px;">
<a href="" style="color: #FFFFFE; font-weight: bold; text-decoration: none;">Yes</a>
    </td>
  </tr>
</table>

或者，您可以在文本按钮上使用图像，甚至更好的图像背景。此技术允许文本在图像关闭时保持均匀。

查看使用图片背景的buttons.cm和VML作为Outlook的后备广告（不支持电子邮件页面元素中的图片背景）。

Answer 3

试试这个working example：

<table width="320" cellspacing="0" cellpadding="0" border="0" bgcolor="#0267BA" align="center" style="padding-left:5px; padding-right:5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;">
        <tr>
            <td width="300" style="padding-bottom:12px; padding-top:14px; padding-left:5px; padding-right:5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;">
                <center>
                    <a target="_blank" style="color: #ffffff; font-size:20px; font-weight: normal; font-family: 'Helvetica Neue Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-decoration: none; width:100%; display:inline-block" href=""><span style="color: #ffffff; font-size:20px;text-decoration: none;">I'm A button-like</span></a>
                </center>
            </td>
        </tr>
</table>

但边界半径不适用于所有客户。

您也可以将此工具用于 test your newsletter in most email clients

编辑：

为链接添加了范围

以下是客户的屏幕截图：

Outlook 2010

Hotmail（IE上的outlook.com）