Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Lean Bulletproof Button
<a href="#" target="_blank" style="background-color:#700429;border:8px solid #700429;border-radius:5px;border-width:8px 50px;box-shadow:0 0 0 1px #3f0217;color:#ffffff;display:inline-block;font-size:20px;font-weight:bold;text-align:center;text-decoration:none;"><!--[if mso]>&#8195;&#8287;<![endif]-->Your Button Text<!--[if mso]>&#8195;&#8287;<![endif]--></a>
@michaeldfoley

This comment has been minimized.

Copy link
Owner Author

michaeldfoley commented Jan 10, 2017

Single element, no tables needed.

Since outlook doesn't apply the background color when padding is used in a non-table element, I use border in place of padding. You can then use box-shadow to add a border, but it's not supported in all clients. Not a terrible tradeoff for the severe reduction in code vs the traditional table-based bulletproof button.

The outlook conditional content around the button text is only necessary if your left/right border is wider than your top/bottom border.

Client Support:

Desktop

  • Apple Mail 8, 9, 10, 11
  • Lotus Notes 8*†, 8.5*†
  • IBM Notes 9*†
  • Outlook 2000*†, 2002*†, 2003*†, 2007*†, 2010*†, 2010 (120 dpi)*†, 2011 (Mac), 2013*†, 2013 (120 dpi)*†, 2016*†, 2016 (Mac)
  • Windows 10 Mail*†
  • Thunderbird 52

Android

  • Android 4.4, 5.1, 6.0
  • Google Inbox*
  • Gmail App IMAP
  • Gmail App*

iOS

  • iPad 2 iOS 7
  • iPad Air iOS 9
  • iPad Retina iOS 8, 9, 10, 11
  • iPad Mini iOS 8, 9, 10
  • iPad Pro 12.9 iOS 10
  • iPhone 5S iOS 7, 8
  • iPhone 6 iOS 8, 9
  • iPhone 6+ iOS 8, 9
  • iPhone 6s iOS 9
  • iPhone 6s+ iOS 9
  • iPhone 7 iOS 10, 11
  • iPhone 7+ iOS 10, 11
  • iPhone 8 iOS 11
  • iPhone 8+ iOS 11
  • Gmail App*
  • Inbox by Gmail*

Webmail

AOL

  • Chrome (Windows)
  • Chrome (Mac)
  • Firefox (Windows)
  • Firefox (Mac)
  • IE 10
  • IE 11
  • Safari

Gmail

  • Chrome (Windows)*
  • Chrome (Mac)*
  • Firefox (Windows)*
  • Firefox (Mac)*
  • IE 10*
  • IE 11*
  • Safari*
  • Inbox by Gmail (Chrome, Firefox)*

G Suite

  • Chrome (Windows)*
  • Chrome (Mac)*
  • Firefox (Windows)*
  • Firefox (Mac)*
  • IE 10*
  • IE 11*
  • Safari*
  • Inbox by Gmail (Chrome, Firefox)*

Office 365

  • Chrome (Windows)*
  • Firefox (Windows)*
  • IE 10*
  • IE 11*

Outlook.com

  • Chrome (Windows)*
  • Chrome (Mac)*
  • Firefox (Windows)*
  • Firefox (Mac)*
  • IE 10*
  • IE 11*
  • Safari*

Yahoo! Mail

  • Chrome (Windows)*
  • Chrome (Mac)*
  • Firefox (Windows)*
  • Firefox (Mac)*
  • IE 10*
  • IE 11*

Comcast

  • Chrome (Windows)*
  • Chrome (Mac)*
  • Firefox (Windows)*
  • Firefox (Mac)*
  • IE 10*
  • IE 11*
  • Safari*
  • Inbox by Gmail (Chrome, Firefox)*

*Does not support box-shadow
†Does not support border-radius

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.