After creating a CSS gradient button using Button Maker, I encountered an issue with Outlook not displaying it properly due to their CSS restrictions. As a result, I am looking to have a simpler button design for Outlook without success in filling the background between my border and text link (5px padding around the text). I tried specifying background-color:#65a9d7 in both the span style and link style.
View my problem:my button in outlook
Here is my button code:
<span class="buttoncustom" style="background-color:#65a9d7"><a href="http://www.google.com" target="_blank" title="Button" style="text-decoration:none;color:#FFFFFF; padding:5px;background-color:#65a9d7"><strong>> My Button</strong></a></span>
This is my stylesheet:
<style type="text/css">
.buttoncustom {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
mso-line-height-rule: exactly;
}
.buttoncustom:hover {
border-top-color: #006699;
background: #006699;
color: #ccc;
}
.buttoncustom:active {
border-top-color: #1b435e;
background: #1b435e;
}
</style>
I have tried numerous adjustments to the code but haven't been able to solve the issue. Any help would be greatly appreciated!