enigmarokker
New Member
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:\[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\]Any idea what's wrong or how to fix it?