Skip to content

Instantly share code, notes, and snippets.

@mxmbadev
Last active March 27, 2019 21:12
Show Gist options
  • Save mxmbadev/41ea863d36d87cfeb1df0eab7c6fa6be to your computer and use it in GitHub Desktop.
Save mxmbadev/41ea863d36d87cfeb1df0eab7c6fa6be to your computer and use it in GitHub Desktop.
I hope this helps because I know how much trouble it is to code emails and especially for Outlook!
Buttons that actually work!!
Look into the html comments to customize your buttons. Feel free to ask any questions you have.
<!--Button-->
<div style="float: left">
<table align="center" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" style="padding: 10px">
<table border="0" cellpadding="0" cellspacing="0" class="mobile-button">
<tr>
<td align="left" bgcolor="#5db406" style="background-color: #5db406; margin: auto; max-width: 600px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 15px 20px" width="100%">
<!--[if mso]>&nbsp;<![endif]-->
<a href="mailto:sales@quore.com?subject=Marriott%20Select%20Brands%20General%20Managers%20Conference%20" style="font-family: Helvetica, Arial, sans-serif; color: #fff; font-weight: normal; text-align: center; background-color: #5db406; text-decoration: none; border: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; display: inline-block" target="_blank">
<span style="font-size: 16px; font-family: Trebuchet MS; color: #fff; font-weight: bold; line-height: 1em; text-align: center">Schedule Time With Quore</span>
</a>
<!--[if mso]>&nbsp;<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table></div>
<div style="float: left"> <!-- YOU CAN REMOVE THE FLOAT IF YOU WANT IT TO BE CENTERED. NOW FOR MSO LOOK AT THE NEXT COMMENT-->
<!--[if mso]>
<!-- TO CENTER IN MSO, WRAP V:ROUNDRECT IN A CENTER TAG <center>mso button code </center> -->
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.google.com/" style="border-radius: 4px;height:40px;v-text-anchor:middle;width:150px;" arcsize="10%" stroke="f" fillcolor="#5DB407">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
Butoton Text
</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-- -->
<table cellpadding="0" cellspacing="0"> <tr>
<td align="center" bgcolor="#5DB407" height="40" style="-webkit-border-radius: 5px; -moz-border-radius: 4px; border-radius: 4px; color: #fff; display: block" width="150">
<a href="http://www.google.com/" style="font-size: 16px; font-weight: bold; font-family: Trebuchet MS; text-decoration: none; line-height: 40px; width: 100%; display: inline-block">
<span style="color: #fff">
Button Text
</span>
</a>
</td>
</tr> </table>
<!--<![endif]-->
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment