CSS Button Won't Render In Email Template

Question

I have an email template here that uses CSS for a button. In most mail clients, the button appears just fine (a green gradient). In Gmail, however, the button does not appear.

See screenshot (rendered in Gmail):

Here is the button code:

.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;

Any idea what's wrong or how to fix it?

Answer 1

Most email clients render HTML as if it were 2001 standards.

• You can't used :hover or any other interactive pseudo selector
• You should make the button an image so that it renders the same across all email clients.

You need to remember that people may be getting your email in desktop & web clients. Outlook probably has the biggest problem with rendering html / css.

If you are using Mailchimp, I believe they have a testing tool that you can use to replicate how your code will render in different clients.

Good luck.