Outlook 2010 using the <a> tag as a css button

Question

I use a link tag stylized to look like a button in my letter. 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; } 

Link style works everywhere except Outlook. Where only the text gets the background color

I noticed the same problem in google + email too. Their buttons show the same css style issue in Outlook

Answer 1

Edition:

Unfortunately, Outlook supports something roughly equivalent to IE5-compatible HTML. This is terrible. This article details an MSDN article in Word 2007 about the HTML and CSS rendering capabilities of Outlook 2007 , which I believe hasn't changed much for Outlook 2010.

Honestly, the only way I was able to get the HTML look to look the way I want it is to generate HTML using usually standard HTML2 tags and properties, rather than using CSS at all. Some CSS renderings, but it really hits or misses.

See CSS Support for Email Clients - Ultimate Guide

In the link above, you can see that the css background property is not supported in Outlook, so you should use background-color , which is supported in Outlook.

Answer 2

Working a bit on the padding issue in Outlook, you can use a border with the same color as the background to create a registration for the button. For instance:

 <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 will only work for basic button styles.

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

Answer 3

As other answers show, support for something truly universal in Outlook 2007, 2010, and 2013 is pretty terrible. The main problem with this button is that the margin property is not supported in these versions of Outlook (they use MS Word as a rendering mechanism, yuk!) Litmus explains this, and the solution is really good .

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

Here is the HTML for 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!

Answer 4

You have not assigned the class to the <a> tag, but if it still does not work because certain email services do not allow certain CSS tags, check here for more information: http://www.campaignmonitor.com/css/