Skip to content

Instantly share code, notes, and snippets.

@kvann

kvann/outlook-button-fix.html

Last active December 29, 2016 19:32
Show Gist options
  • Save kvann/e66ff64c9bca6911907a06abfc0ebb80 to your computer and use it in GitHub Desktop.
Save kvann/e66ff64c9bca6911907a06abfc0ebb80 to your computer and use it in GitHub Desktop.
Download ZIP
Outlook desktop has a hard time rendering basic button styling. In most cases, styling the href link tag isn't sufficient enough since some version of Outlook does not support the display block attribute. This button layout fixes the Outlook display issue when button text are clipped if text wrapped onto multiple lines. This update also ensures …
Raw
outlook-button-fix.html
<!--[if mso]>
<style type="text/css">
/* Import the VML behavior for Outlook */
v\: * { behavior:url(#default#VML); display:inline-block }
</style>
<![endif]-->
<!-- Start the button container -->
<div class="button-wrapper" style="margin: 0; outline: none; padding: 0; text-align: center;">
<!-- This ensures that Outlook 2007, 2010, 2013 and 2016 renders the button as intended. Update width and height so button expand with the text -->
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://activecampaign.com" style="v-text-anchor:middle; width:392px; height:76px; " arcsize="10%" strokecolor="#02cc9d" strokeweight="1pt" fillcolor="#02cc9d" o:button="true" o:allowincell="true" o:allowoverlap="false" >
<v:textbox inset="10px,10px,10px,10px">
<center style="color:#ffffff;font-family:verdana, arial, sans; font-size:18px;line-height: 1.1;">Click here to download my ebook today</center>
</v:textbox>
</v:roundrect>
<![endif]-->
<!-- For other email clients -->
<a href="http://activecampaign.com" style="margin: 0; outline: none; padding: 18px; color: #ffffff; background-color: #02cc9d; border: 1px solid #02cc9d; border-radius: 3px; font-family: verdana, arial, sans; font-size: 18px; display: inline-block; line-height: 1.1; text-align: center; text-decoration: none; mso-hide: all;">
<span style="color:#ffffff;font-family:verdana, arial, sans;font-size:18px;"> Click here to download my ebook today </span>
</a>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment