Databases
StackOverflow2013
Postsdbo
POCSS Button Won't Render In Email Template
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Button Won't Render In Email Template
    text
    copied!<p>I have an email template <a href="http://rainleader.com/basic.html" rel="nofollow noreferrer">here</a> 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. </p> <p>See screenshot (rendered in Gmail):</p> <p><img src="https://i.stack.imgur.com/B21PK.png" alt="enter image description here"></p> <p>Here is the button code:</p> <pre><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; </code></pre> <p>Any idea what's wrong or how to fix it?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload