Menu
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
846
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). In other words, you can nest any elements inside an <a> except the following: <a> <audio> (if the controls attribute is present)
How do I center a button in HTML in an email? To center your HTML button, you'll need to use the “align” parameter. Like “text-align” in any text editing software, this tag has four options: left, center, right, and justify. For a centered button, simply add align=”center” to the button's table tag.
Outlook.com and the Outlook iOS app added support for CSS background images and some related properties, as well as certain Flexbox and Grid properties.
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
79
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
