Instantly share code, notes, and snippets.
Blog post explaining this HTML Email Button is here: http://www.industrydive.com/blog/how-to-make-html-email-buttons-that-rock/
New to downlevel-revealed conditional comment, but this blog post was a huge help in setting up rounded buttons for the first time. I have one question about the code above, as soon as I dropped all of the conditional comments into my file within Dreamweaver the table disappears completely in the design preview. Any insight as to why? Everything was showing until I placed the final tag in. Not sure where to begin on what I'm missing. Thanks in advance for any help you might be able to give!
@kllarkin That comment formulation was causing problems in Outlook.com (formerly hotmail) too. It's all tradeoffs. I just updated the gist, see if that works better for you. Instead of wonky comments, now we're using technically invalid tags that should be ignored by everything except Microsoft products.
I've explained the changes to the downlevel comments in more detail here: http://esd.io/blog/html-email-buttons-conditional-comments.html
@elidickinson Thank you! That change allowed the button to show in Dreamweaver preview pane. Had also noticed the issues in Outlook.com and will rerun all my tests today to confirm this fix there as well.
I moved the button text color declaration to a span inside the anchor tag so that the color shows up correctly in Outlook Web App aka Office 365. This is different from Outlook.com, which has always worked.
You can avoid the MSO conditional around the "normal" button in the table if you wrap the table in a div, and put the style "mso-hide: all;" in div, the table, and it's TD.
@elidickinson Thank you, really nice button ! It definitely work on outlook Web App /O365 and Outlook 2010. However I did a litmus test and the rounded corners do not display on Outlook 2003. An tips ?
@SethHamilton I'm pretty sure "mso-hide: all;" fails when a message is forwarded in Outlook, resulting in every button appearing doubled.
the button isn't being centered in Outlook clients. How can I fix that?
n/m, I just put the MSO code inside a centered table and that seemed to fix it.
@elidickinson Seems to only work when wrapped with these instead (To show for all except outlook)
<!--[if !mso]><!-- -->
<table cellspacing="0" cellpadding="0"> <tr>
<td align="center" width="300" height="40" bgcolor="#d62828" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">
<a href="http://www.EXAMPLE.com/" style="font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
<span style="color: #ffffff;">
Button Text Here!
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:45px;v-text-anchor:center;width:550px;" arcsize="10%" stroke="f" fillcolor="#292929">
<table align="center" border="0" cellspacing="0" cellpadding="0">
<td align="center" width="550" height="50" bgcolor="#292929" style="color: #ffffff; display: block;">
<a href="#" style="font-size:16px; font-weight: 600; font-family:sans-serif; text-decoration: none; line-height:45px; width:550px; display:inline-block">
<span style="color: #ffffff;">MyInspirent.com/Anne.Wilon</span>
When previewing this in Outlook 2000-2003, <![if !mso]> and <![endif]> are showing up and the text inside the button isn't vertically centered. What can I do to fix this?
Is it possible to also add an image inside the button? Much like this example here: http://media.mobileweb.bosscontrol.com/images/client/6143/buttons/search-button.png
How would you go about centering this button?
Once i click Button its turn to Yellow. I want it stay blue that is same as button color even when clicked.
How to make the button inside email works? How to make it link to another php file within an email via click of the button. I'm using PHPMAILER for email. Thanks in advance