Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>
@elidickinson

This comment has been minimized.

Show comment
Hide comment
Owner

elidickinson commented Mar 8, 2014

Blog post explaining this HTML Email Button is here: http://www.industrydive.com/blog/how-to-make-html-email-buttons-that-rock/

@kllarkin

This comment has been minimized.

Show comment
Hide comment
@kllarkin

kllarkin Mar 28, 2014

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!

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!

@elidickinson

This comment has been minimized.

Show comment
Hide comment
@elidickinson

elidickinson Mar 28, 2014

@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.

Owner

elidickinson commented Mar 28, 2014

@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.

@elidickinson

This comment has been minimized.

Show comment
Hide comment
@elidickinson

elidickinson Mar 30, 2014

I've explained the changes to the downlevel comments in more detail here: http://esd.io/blog/html-email-buttons-conditional-comments.html

Owner

elidickinson commented Mar 30, 2014

I've explained the changes to the downlevel comments in more detail here: http://esd.io/blog/html-email-buttons-conditional-comments.html

@kllarkin

This comment has been minimized.

Show comment
Hide comment
@kllarkin

kllarkin Mar 31, 2014

@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.

@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.

@elidickinson

This comment has been minimized.

Show comment
Hide comment
@elidickinson

elidickinson Jun 15, 2014

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.

Owner

elidickinson commented Jun 15, 2014

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.

@milesstewart88

This comment has been minimized.

Show comment
Hide comment

Perfect!!!

@SethHamilton

This comment has been minimized.

Show comment
Hide comment
@SethHamilton

SethHamilton May 7, 2015

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.

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.

@timbuguet

This comment has been minimized.

Show comment
Hide comment
@timbuguet

timbuguet Jun 19, 2015

@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 ?

@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 ?

@elidickinson

This comment has been minimized.

Show comment
Hide comment
@elidickinson

elidickinson Nov 24, 2015

@SethHamilton I'm pretty sure "mso-hide: all;" fails when a message is forwarded in Outlook, resulting in every button appearing doubled.

Owner

elidickinson commented Nov 24, 2015

@SethHamilton I'm pretty sure "mso-hide: all;" fails when a message is forwarded in Outlook, resulting in every button appearing doubled.

@KrunchMuffin

This comment has been minimized.

Show comment
Hide comment
@KrunchMuffin

KrunchMuffin Jan 4, 2016

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.

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.

@AdrianTeh

This comment has been minimized.

Show comment
Hide comment
@AdrianTeh

AdrianTeh Jan 23, 2016

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

@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

This comment has been minimized.

Show comment
Hide comment
@francisngo

francisngo Feb 17, 2016

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

<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

This comment has been minimized.

Show comment
Hide comment
@NizzeB

NizzeB 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

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

This comment has been minimized.

Show comment
Hide comment
@craigroh

craigroh Dec 6, 2016

How would you go about centering this button?

craigroh commented Dec 6, 2016

How would you go about centering this button?

@99niel

This comment has been minimized.

Show comment
Hide comment
@99niel

99niel 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.

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

This comment has been minimized.

Show comment
Hide comment
@koez

koez 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

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

This comment has been minimized.

Show comment
Hide comment
@fivedesigns

fivedesigns Jul 5, 2017

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

fivedesigns commented Jul 5, 2017

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

@davidbierman2003

This comment has been minimized.

Show comment
Hide comment
@davidbierman2003

davidbierman2003 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

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

This comment has been minimized.

Show comment
Hide comment
@deniszavadskiy

deniszavadskiy Dec 19, 2017

does this code work properly on windows 10 mail app?

does this code work properly on windows 10 mail app?

@hayds

This comment has been minimized.

Show comment
Hide comment
@hayds

hayds 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

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

This comment has been minimized.

Show comment
Hide comment
@IamBigFool

IamBigFool Feb 26, 2018

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

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

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