csshtml-emailoutlook-2010

Outlook 2010, Using <a> tag as a button CSS


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.

google+ link tag styled to look like a button


Solution

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

    See CSS Support in Mail Clients - The Ultimate Guide

    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.