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