Skip to content

Instantly share code, notes, and snippets.

@marcbacon
Created October 20, 2015 19:45
Show Gist options
  • 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>
@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