HTML email buttons that work

html_email_buttons_1.html

<div>
<!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.EXAMPLE.com/" style="height:40px;v-text-anchor:middle;width:300px;" arcsize="10%" stroke="f" fillcolor="#d62828">
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
      Button Text Here!
    </center>
  </v:roundrect>
  <![endif]-->
  <![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!
    </span>
    </a>
  </td> 
  </tr> </table> 
  <![endif]>
</div>

Thanks for this repo it's awesome. I wanted to have a button that changed width dynamically based on the text inside.

I found this https://litmus.com/community/discussions/538-vml-outlook-07-10-13-unwanted-20px-padding-at-the-bottom which shows how to use mso-fit-shape-to-text:true

And this https://litmus.com/community/discussions/1269-flexible-multi-line-bulletproof-buttons which shows how to avoid some unwanted padding.

This is my end result

<!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.EXAMPLE.com/" style="mso-wrap-style:none; mso-position-horizontal: center" arcsize="10%" strokecolor="#0368d4" strokeweight="1px" fillcolor="#d62828">
	<v:textbox style="mso-fit-shape-to-text:true">
		<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">Button Text Here!</center>
	</v:textbox>
  </v:roundrect>
  <![endif]-->
  <![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!
    </span>
    </a>
  </td> 
  </tr> </table> 
  <![endif]>
</div>

Seems to work great in outlook 2016 which uses word to render HTML

Hey i got an issue with the code, the roundrect was overlapping the text. Can anyone give me some guides, appreciate with thanks.

<!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:36px;v-text-anchor:middle;width:350px;position:absolute; top:280; left:310;" arcsize="5%" strokecolor="#EB7035" fillcolor="#EB7035"> <w:anchorlock/> <center style="color:#ffffff;font-family: sans-serif; letter-spacing: 1px; font-size:16px;">My Text!</center> </v:roundrect> <![endif]-->

Everyone that asked how to center the button, just wrap it in a <center> tag. I tried to horizontally align the v:roundrect with the o:hralign="center" attribute (along with anything else that I could find or made sense) but nothing really works. Best to just center the outer tag and the text with simple <center> tags:

<center>
    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.example.com" style="height: 45px; v-text-anchor: middle; width: 300px;" arcsize="10%" stroke="f" fillcolor="#6699ff">
        <w:anchorlock/>
        <center style="color: #ffffff; font-family: sans-serif; font-size: 15px;">
            Text
        </center>
    </v:roundrect>
</center>

what if I don't want stroke="f", why is there no documentation on the internet about this? microsoft devs should be tortured daily

The link seems to not work sometimes in Outlook. Will this convert it to an image in some cases - like forwarding it?
Edit: I've added another normal anchor tag around the <v:roundrect> element and seems to work.