Question

我创建了一个带有Button Maker的CSS渐变按钮，但由于CSS的限制，它在Outlook中无法正常显示。因此，我希望在Outlook中显示一个更简单的按钮，但我没有设法填充我的边框和文本链接之间的背景（需要填充文本周围的5px填充）。我在span范围和链接样式中指定了背景颜色：＃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

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

buttons.cm

Answer 2

正如其他答案所暗示的那样，对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>

希望这对你或任何发现的googler仍有帮助。

Answer 3

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

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

试试这个：

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

Answer 4

Litmus有一篇关于各种选项和支持的博文。我通常使用Padding + Border选项。我发现它适用于所有主要客户（莲花笔记除外）。

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

注意：在测试时，你需要一个正确的链接，如果你只是在那里有一个哈希，它将无法在outlook.com中工作，因为他们剥离了链接！

Answer 5

您是否尝试直接设置锚点样式？

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

Answer 6

请使用下面提到的HTML代码，这在Outlook中效果很好。

{{1}}

在Outlook中显示CSS按钮

6 个答案: