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

Answer 1

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