Skip to content

Instantly share code, notes, and snippets.

@benknight
Created August 10, 2012 18:28
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save benknight/3316487 to your computer and use it in GitHub Desktop.
Save benknight/3316487 to your computer and use it in GitHub Desktop.
HTML Email buttons that work in Outlook 2007+
/**
* HTML Email buttons that work in Outlook 2007+
*
* This is a really weird hacked up piece of crap but basically the technique is the containing element has some solid color background,
* and the inner <a> has a solid border which acts like padding which is the same color as the background color
*/
<span style="display: inline-block; text-align: center; background-color: #d21d00; border: 1px solid #5d150e; color: white;">
<span style="display: inline-block; background-color: #d21d00; color: white; border-width: 1px 0 0 1px; border-color: #f3948a; border-style: solid;">
<a style="display: inline-block; text-decoration: none; font-weight: bold; color: white; border-color: #d21d00; border-width: 5px 10px; border-style: solid; white-space: nowrap;" href="http://google.com">Go to Google</a>
</span>
</span>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
@zukilover
Copy link

why the nested tags? can it work within a single 'a' tag only?

@pimtel
Copy link

pimtel commented Jun 15, 2017

Thanks! This piece of code save me.

@KavinAlagarsamy
Copy link

It's not working man

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