I am using a link tag styled to look like a button in my email. The CSS for the tag is as follows:
a.submit{
background: none repeat scroll 0 0 #FF9900;
border: 1px solid #FF9900;
color: #FFFFFF;
display: inline-block;
padding: 6px;
text-decoration: none;
}
Html:
<a href="#">Submit</a>
The link style works everywhere except in Outlook. Where only the text gets the background color.
I noticed the same issue in the Google+ email too. Their buttons show the same CSS styling problem in Outlook.
EDITED:
Unfortunately Outlook supports something roughly equivalent to IE5 compatible HTML. It's really terrible. Here's a detailed MSDN article on the Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007, which I don't believe changed much for Outlook 2010.
Honestly, the only way I've been able to get outlook HTML to look the way I want is to hand generate the HTML using roughly HTML2 standard tags and properties and not using CSS at all. Some CSS renders, but it's really hit or miss.
In the above link you can see css background
property is not supported in outlook so you should use background-color
which is supported in outlook.