CSS按钮不会在电子邮件模板中呈现

Question

我有一个电子邮件模板here，它使用CSS作为按钮。在大多数邮件客户端中，按钮显示正常（绿色渐变）。但是，在Gmail中，该按钮不会显示。

查看屏幕截图（在Gmail中呈现）：

这是按钮代码：

.button {
       background-image: -webkit-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(126,163,3,1) 50%);
       background-image:    -moz-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(126,163,3,1) 50%);
       background-image:     -ms-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(126,163,3,1) 50%);
       background-image:      -o-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(126,163,3,1) 50%);
       background-image:         linear-gradient(top, rgba(168,224,0,1) 0%,rgba(126,163,3,1) 50%);
       -webkit-box-shadow: 0px 0px 0px 1px rgba(250,250,250,1)inset;
          -moz-box-shadow: 0px 0px 0px 1px rgba(250,250,250,1)inset;
               box-shadow: 0px 0px 0px 1px rgba(250,250,250,1)inset;
       border: solid 1px rgba(112,112,112,1);
       -webkit-border-radius: 3px;
          -moz-border-radius: 3px;
               border-radius: 3px;
       width: 180px;
       height: 44px;
       padding: 0px 24px 0px 24px;
       display: block;
       font-size: 18px;
       font-family: Arial, Sans-serif;
       line-height: 40px;
       text-align: center;
       color: rgba(247,247,247,1) !important;
       font-weight: bold;
       margin: 0 auto;
    }

    a.button {
        text-decoration: none !important;
    }

    .button:hover {
       background-image: -webkit-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(137,179,0,1) 50%);
       background-image:    -moz-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(137,179,0,1) 50%);
       background-image:     -ms-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(137,179,0,1) 50%);
       background-image:      -o-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(137,179,0,1) 50%);
       background-image:         linear-gradient(top, rgba(168,224,0,1) 0%,rgba(137,179,0,1) 50%);
       -webkit-box-shadow: 0px 0px 0px 1px rgba(239,249,254,1)inset;
          -moz-box-shadow: 0px 0px 0px 1px rgba(239,249,254,1)inset;
               box-shadow: 0px 0px 0px 1px rgba(239,249,254,1)inset;
       border: solid 1px rgba(179,179,179,1);
    }
    .button:active {
       -webkit-box-shadow: 0px 0px 0px 1px rgba(154,186,203,1)inset;
          -moz-box-shadow: 0px 0px 0px 1px rgba(154,186,203,1)inset;
               box-shadow: 0px 0px 0px 1px rgba(154,186,203,1)inset;

知道什么是错的或如何解决它？

Answer 1

大多数电子邮件客户端都会将HTML呈现为2001标准。

• 您无法使用：悬停或任何其他交互式伪选择器
• 您应该将按钮设为图像，以便在所有电子邮件客户端中呈现相同的颜色。

您需要记住，人们可能会在桌面版和电子邮件中收到您的电子邮件。网络客户。 Outlook可能是渲染html / css的最大问题。

如果您使用的是Mailchimp，我相信他们有一个测试工具，您可以使用它来复制代码在不同客户端中的呈现方式。

祝你好运。