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

Question

I am using a link tag styled to look like a button in my email . The css for the tag is as follows.

<a href="#">Submit</a>

a.submit{
 background: none repeat scroll 0 0 #FF9900;
    border: 1px solid #FF9900;
    color: #FFFFFF;
    display: inline-block;
    padding: 6px;
    text-decoration: none;


}

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

Solution 1

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.

Solution 2

A bit of a work around the padding issue in Outlook, you can use a border with the same color as the background to create the padding for the button. For example:

<a style="border:15px solid #FFAE00;background-color:#FFAE00;color:#FFF;font-size:14px; font-family:Arial;text-decoration:none" href="#">
Click Here
</a>

This would only work for basic button styles.

http://jsbin.com/pohidedayo/edit?html,output

Solution 3

As other answers suggest, the support for anything really universal in Outlook 2007, 2010 and 2013 is pretty terrible. The main problem in the case of this button is that the margin property is not supported in these versions of Outlook (they use MS Word as the rendering engine, yuk!) Litmus explains this and the solution really well.

I managed to create an HTML table-based button that will work in almost all major email clients.

Here is the HTML for your reference:

<table cellpadding="0" cellmargin="0" border="0" height="44" width="178" style="border-collapse: collapse; border:5px solid #c62228">
  <tr>
    <td bgcolor="#c62228" valign="middle" align="center" width="174">
      <div style="font-size: 18px; color: #ffffff; line-height: 1; margin: 0; padding: 0; mso-table-lspace:0; mso-table-rspace:0;">
        <a href="#" style="text-decoration: none; color: #ffffff; border: 0; font-family: Arial, arial, sans-serif; mso-table-lspace:0; mso-table-rspace:0;" border="0">MY BUTTON</a>
      </div>
    </td>
  </tr>
</table>

Hope this helps!