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年的标准一样。

• 您不能使用:hover或任何其他交互式伪选择器
• 您应该将按钮设置为图像，以便它在所有电子邮件客户端上呈现相同的效果。

你需要记住，人们可能会在桌面和web客户端收到你的电子邮件。Outlook在呈现html / css方面可能有最大的问题。

如果你正在使用Mailchimp，我相信他们有一个测试工具，你可以用它来复制你的代码如何在不同的客户端渲染。

祝好运。