在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>

我已经玩了很长时间的代码无济于事,所以我非常感谢你的帮助!

Answer 1

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

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

尝试这个：

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

Answer 2

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

buttons.cm

Answer 3

正如其他答案所暗示的那样，对 Outlook 2007、2010 和 2013 中真正通用的任何内容的支持非常糟糕。这个按钮的主要问题是这些版本的 Outlook 不支持边距属性（他们使用 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>

希望这对您或任何遇到这种情况的谷歌人仍然有帮助。