I wrote up my bulletproof HTML Email Buttons too: http://www.industrydive.com/bl...

ameister14 · on March 7, 2014

Border-radius doesn't work in Outlook 2007/10/13.

For me, that's a dealbreaker since a lot of traditional businesses use those clients.

eli · on March 8, 2014

Ah, but I have an answer for that!

Take a look, I updated my post: http://www.industrydive.com/blog/how-to-make-html-email-butt...

As terrible as Outlook's rendering engine is, it comes with a reliable way to target code to a client. So you make an Outlook-only button that only Outlook sees (and, bonus, are free to use Microsoft-only HTML extensions) and then a separate HTML version that Outlook is instructed to ignore. The code's ugly and annoying to work with, but it works!

yuhong · on March 8, 2014

In fact, just did a more complete version that works in IE too:

  <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word">
  <head>
  <!--[if !mso]>
  <style>
  v\:* {behavior:url(#default#VML);}
  o\:* {behavior:url(#default#VML);}
  w\:* {behavior:url(#default#VML);}
  .shape {behavior:url(#default#VML);}
  </style>
  <![endif]-->
  </head>
  <body>
  <div>
  <!--[if vml]>
  <v:roundrect href="http://www.EXAMPLE.com/" style="height:40px;v-text-anchor:middle;width:300px;" arcsize="10%" stroked="f" fillcolor="#d62828">
    <w:anchorlock/>
  <v:textbox>
    <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
      Button Text Here!
    </center>
  </v:textbox>

  </v:roundrect>
  <![endif]-->
  <!--[if !vml]> <!-->
  <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="color: #ffffff; font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
      Button Text Here!
    </a>
  </td> 
  </tr> </table> 
  <!-- <![endif]-->
  </div>

eli · on March 8, 2014

Interesting! So this would be for rounded corners on IE8 or worse? (I think 9 supports border-radius, right?) Bummer that it requires adding styles to the head.

yuhong · on March 8, 2014

You may want to use <!--[if vml]> instead of <!--[if mso]>, and test the content with IE8 as well as Word.

ameister14 · on March 8, 2014

Hahaha, awesome. This is what makes me come back to the hn community time and time again. Thanks for the update.

nathancahill · on March 8, 2014

Yeah, it's really going to suck for those traditional businessmen when they can't see the rounded corners on your buttons.

gschier · on March 7, 2014

Awesome, thanks for the comments. I actually saw your blog post a few days ago.

I wasn't aware that 3 digit hex codes had less support. I had tested everything in Litmus and it seemed fine, but I've updated the examples anyway to use 6 digit color codes just to be sure.

I agree with your point on image buttons as well. We're planning on adding many more snippets in the future so stay tuned :)

eli · on March 7, 2014

Cool, anything that makes HTML email design easier gets a thumbs up from me.

gschier · on March 7, 2014

Hey Eli. It sounds like you're really knowledgeable in this space. I'd love to chat more. You can reach me at greg@sendwithus.com.

mikepurvis · on March 8, 2014

Images are going to be a problem for the social buttons, too. There should definitely be alt attributes providing reasonable fallback text.