在 Outlook 中显示 CSS 按钮

Question

我使用Button Maker 创建了一个 CSS 渐变按钮，但由于其 CSS 限制，它无法在 Outlook 中正确显示。因此，我希望在 Outlook 中显示一个外观更简单的按钮，但我没有设法填充边框和文本链接之间的背景（需要填充文本周围的 5px 填充）。我在 span 样式和链接样式中都指定了 background-color:#65a9d7。

我的问题：my button in outlook

我的按钮代码：

<span class="buttoncustom" style="background-color:#65a9d7"><a href="http://www.google.com" target="_blank" title="Button" style="text-decoration:none;color:#FFFFFF; padding:5px;background-color:#65a9d7"><strong>&#62; My Button</strong></a></span>

我的样式表：

<style type="text/css">
        .buttoncustom {
           border-top: 1px solid #96d1f8;
           background: #65a9d7;
           background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
           background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
           background: -moz-linear-gradient(top, #3e779d, #65a9d7);
           background: -ms-linear-gradient(top, #3e779d, #65a9d7);
           background: -o-linear-gradient(top, #3e779d, #65a9d7);
           padding: 5px 10px;
           -webkit-border-radius: 8px;
           -moz-border-radius: 8px;
           border-radius: 8px;
           -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
           -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
           box-shadow: rgba(0,0,0,1) 0 1px 0;
           text-shadow: rgba(0,0,0,.4) 0 1px 0;
           color: white;
           font-size: 14px;
           font-family: Georgia, serif;
           text-decoration: none;
           vertical-align: middle;
           mso-line-height-rule: exactly;
           }
        .buttoncustom:hover {
           border-top-color: #006699;
           background: #006699;
           color: #ccc;
           }
        .buttoncustom:active {
           border-top-color: #1b435e;
           background: #1b435e;
           }
    </style>

多年来我一直在玩代码无济于事，因此非常感谢您的帮助！

Answer 1

请使用下面提到的 HTML 代码，这在 Outlook 中运行良好。

<table cellpadding="0" align="left" cellspacing="0" style="border-radius:2px; background-color:#5794FF; color:#FFFFFF">
    <tbody>
        <tr>
            <td align="center" height="32" style="padding:0px 19px; height:32px; font-size:14px; line-height:12px">
                <a href="https://www.google.co.in/" target="_blank" style="text-decoration:none; color:#FFFFFF">Search Google</a>
            </td>
        </tr>
    </tbody>
</table>

Answer 2

Litmus 有一篇很棒的博客文章，介绍了各种选项和对此的支持。我通常使用 Padding + Border 选项。我发现它适用于所有主要客户（除了莲花笔记）。

https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design

注意：在测试时，您需要在链接中使用正确的 url，如果您只是在其中有一个哈希值，它将无法在 outlook.com 中工作，因为它们会删除链接！

Answer 3

查看 Campaign Monitor 用于在电子邮件中制作防弹按钮的工具。使用 VML for Outlook 以及关闭图像时的后备显示：

buttons.cm

Answer 4

正如其他答案所暗示的那样，Outlook 2007、2010 和 2013 对任何真正通用的东西的支持都非常糟糕。这个按钮的主要问题是这些版本的 Outlook 不支持 margin 属性（他们使用 MS Word 作为渲染引擎，yuk！）Litmus explains this and the solution very well。

我设法创建了一个HTML table-based button，几乎可以在所有主要的电子邮件客户端中使用。

这是供您参考的 HTML：

<table cellpadding="0" cellmargin="0" border="0" height="44" width="178" style="border-collapse: collapse; border:5px solid #c62228">
  <tr>
    <td bgcolor="#c62228" valign="middle" align="center" width="174">
      <div style="font-size: 18px; color: #ffffff; line-height: 1; margin: 0; padding: 0; mso-table-lspace:0; mso-table-rspace:0;">
        <a href="#" style="text-decoration: none; color: #ffffff; border: 0; font-family: Arial, arial, sans-serif; mso-table-lspace:0; mso-table-rspace:0;" border="0">MY BUTTON</a>
      </div>
    </td>
  </tr>
</table>

希望这对您或任何遇到的谷歌用户仍然有帮助。

Answer 5

我发现使用与按钮背景颜色相同的边框是一种可靠的解决方法。所以不要这样：

a.button { background: #dddddd; padding: 8px; }

试试这个：

a.button { background: #dddddd; border: 8px solid #dddddd; }

Answer 6

你试过直接给锚定样式吗？

.buttoncustom a {
       border: 1px solid #96d1f8;
       background: #65a9d7;
       padding: 5px 10px;
}