Skip to content

Instantly share code, notes, and snippets.

@elidickinson
Last active September 9, 2024 10:44
Show Gist options
  • Save elidickinson/9424116 to your computer and use it in GitHub Desktop.
Save elidickinson/9424116 to your computer and use it in GitHub Desktop.
HTML email buttons that work
<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>
@codespore
Copy link

@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!
    </span>
    </a>
  </td> 
  </tr> </table> 
<!--<![endif]-->

@francisngo
Copy link

<div>
  <!--[if mso]>
                      <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">
                        <w:anchorlock/>
                        <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
                          MyInspirent.com/Anne.Wilon
                        </center>
                      </v:roundrect>
                      <![endif]-->
  <![if !mso]>
  <table align="center" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <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>
        </a>
      </td>
    </tr>
  </table>
  <![endif]>
</div>

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?

@NizzeB
Copy link

NizzeB commented Jun 22, 2016

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

@craigroh
Copy link

craigroh commented Dec 6, 2016

How would you go about centering this button?

@99niel
Copy link

99niel commented Jan 24, 2017

Once i click Button its turn to Yellow. I want it stay blue that is same as button color even when clicked.

@koez
Copy link

koez commented Jan 28, 2017

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

@fivedesigns
Copy link

fivedesigns commented Jul 5, 2017

how can i add text-decoration on <v:roundrect button text (underline)

Copy link

ghost commented Nov 17, 2017

Thank you for writing this code. I spent a lot of time yesterday looking for a button that looked nice and would work in Outlook. This is the first code I have found that works. Great Job!

David

@deniszavadskiy
Copy link

does this code work properly on windows 10 mail app?

@hayds
Copy link

hayds commented Jan 10, 2018

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

@IamBigFool
Copy link

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]-->

@charlie-s
Copy link

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>

@jaxx1rr
Copy link

jaxx1rr commented Sep 9, 2019

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

@roloep85
Copy link

roloep85 commented Sep 9, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment