1

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

我的问题：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>

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

4

6 回答 6

5

请参阅 Campaign Monitor 用于在电子邮件中制作防弹按钮的工具。将 VML for Outlook 与关闭图像时的后备显示一起使用：

纽扣.cm

于 2013-01-22T16:09:56.940 回答
4

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

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

尝试这个：

a.button { background: #dddddd; border: 8px solid #dddddd; }
于 2013-07-18T14:48:27.500 回答
4

正如其他答案所暗示的那样，对 Outlook 2007、2010 和 2013 中任何真正通用的东西的支持非常糟糕。这个按钮的主要问题是这些版本的 Outlook 不支持 margin 属性（他们使用 MS Word 作为渲染引擎，yuk！）Litmus 很好地解释了这个和解决方案。

我设法创建了一个基于 HTML 表格的按钮，该按钮适用于几乎所有主要的电子邮件客户端。

这是供您参考的 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>

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

于 2014-04-01T00:48:35.800 回答
2

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

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

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

于 2016-01-28T04:01:56.620 回答
2

请使用下面提到的 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>
于 2019-03-12T07:50:10.083 回答
-1

您是否尝试过直接为锚定样式？

.buttoncustom a {
       border: 1px solid #96d1f8;
       background: #65a9d7;
       padding: 5px 10px;
}
于 2013-01-22T13:34:24.650 回答