在 Outlook 中显示 CSS 按钮

Question

我使用 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>

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

原文由 user2000334 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

试试这个：

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

原文由 Phil 发布，翻译遵循 CC BY-SA 3.0 许可协议