Skip to content

Instantly share code, notes, and snippets.

@marcbacon
Created October 20, 2015 19:45
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save marcbacon/0282f86ac2ff6e2277b8 to your computer and use it in GitHub Desktop.
Save marcbacon/0282f86ac2ff6e2277b8 to your computer and use it in GitHub Desktop.
VML based button. Rounded corners will work in Outlook.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://example.com" style="height:36px;v-text-anchor:middle;width:150px;" arcsize="5%" strokecolor="#EB7035" fillcolor="#EB7035">
<w:anchorlock/>
<center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;">I am a button &rarr;</center>
</v:roundrect>
<![endif]-->
<a href="http://example.com" style="background-color:#EB7035;border:1px solid #EB7035;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;">I am a button &rarr;</a>
</div>
</td>
</tr>
</table>
@Patfreeze
Copy link

Patfreeze commented Nov 19, 2020

Thank you! After 5 years later... 👍

@adamragheb
Copy link

Thank you! After 5 years later... 👍

Did this work for outlook 2007? and how is it working while the tag is still there below the vml code?

@SavkaTaras
Copy link

Any chance you guys know how to make a round callout without a link?

@Patfreeze
Copy link

Thank you! After 5 years later... 👍

Did this work for outlook 2007? and how is it working while the tag is still there below the vml code?

I was on Outlook 2013. Not sure if it works on 2007.

@Patfreeze
Copy link

Any chance you guys know how to make a round callout without a link?

Try to replace <a by <span and the by

@manueldiaz17
Copy link

Hoy en dia no funciona, no salen los bordes redondeados

@Patfreeze
Copy link

There is this site which seems to be a good alternative to make templating email
https://mjml.io/

@skrshawon
Copy link

Thanks, it's work for me.

@SergiiManiuk
Copy link

Need fixed width:150px;
Bad solution....

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