Bulletproof Buttons for Office 365 (and Everything Else)
The Problem
A number of bulletproof button designs have been in use for quite a while now. We especially like the bulletproof button generator from Stig and Campaign Monitor. However, these “bulletproof” buttons actually have a few chinks in their armor: mostly Office 365 and Lotus Notes. You can see in this example that the old style of the bulletproof button isn’t quite working any more. In Office 365, it doesn’t even appear to be a link!
The button should look more like this.
The Fix
It’s 2015, and it’s time for a new bulletproof button! In order to fix this in Office 365, we returned to the email coder’s best friend: tables. By putting the button into a simple table, we’re able to much more closely control the appearance of the button. In this example, you can see that this button works in Outlook 365.
This button works in Earthlink, unlike the older versions. It also works in Lotus Notes, showing as a little short in 6.5 and 7. Still, this is better than the standard button, which doesn’t even show in earlier versions and shows only as hyperlinked text in the later versions. To make Lotus Notes 6.5 and 7 respect the width of the button, we had to apply the dimensions of the button to the table as well.
You’ll find these dimensions in 4 places:
- In the VML section
- In the Table tag
- In the TD tag
- In the A tag (as line-height and width)
<center>
<div style="margin: 0 auto;"><!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:50px;v-text-anchor:middle;width:250px;" arcsize="16%" strokecolor="#ed7014" fill="t">
<v:fill type="tile" src="https://www.emailonacid.com/images/orange_btn_bg.jpg" color="#ed7014" />
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:18px;font-weight:bold;">Click the Button!</center>
</v:rect>
<![endif]-->
<div style="margin: 0 auto;mso-hide:all;">
<table align="center" cellpadding="0" cellspacing="0" height="50" width="250" style="margin: 0 auto; mso-hide:all;">
<tbody>
<tr>
<td align="center" bgcolor="#ed7014" height="50" style="vertical-align:middle;color: #ffffff; display: block;background-color:#ed7014;background-image:url(https://www.emailonacid.com/images/orange_btn_bg.jpg);border:1px solid #ed7014;mso-hide:all;" width="250">
<a class="cta_button" href="#" style="font-size:16px;-webkit-text-size-adjust:none; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:50px; width:250px; display:inline-block;" title="Button">
<span style="color:#ffffff">Click the Button!</span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</center>
Being Centered
One challenge we faced was getting the button to center in all clients. You won’t always want the button to be centered, but we found this much more difficult than right or left align, so I have included this in my example button. I used both the <center> tag and align=”center” on the table inside to make sure that it works in all clients.
Pixel Perfect Emails
How do we find fixes like the one I detailed above? Lots and lots of testing! If you’d like to get started with email testing, join our 7 day free trial today!
Author: Kyle Lapaglia
Author: Kyle Lapaglia
27 thoughts on “Bulletproof Buttons for Office 365 (and Everything Else)”
Comments are closed.
Wow! Thank you for this.
I have been looking for a “more” bulletproof button than what Campaign Monitor showed.
After trying to apply this, I’ve realized that this does not work well responsively. At least when the link text is longer than mobile-sized screen.
The button height is predicated on the line-height being defined, but if the text has to wrap, then the button height becomes ridiculously tall.
Is there a better solution than this?
Jonathan,
I’d recommend controlling height and line-height in media queries.
This is getting silly now. All that code just for a decent button. If I want to use bulletproof background images and hide certain parts of the email, I am forced to more than triple the amount of coding I have to do, but do the clients want to pay extra? Do they hell!.
It’s also tempting to think that many of these new bullet proof techniques will only be used in ‘edge-cases’ because the likes of Next and Amazon are still sending out non mobile optimised image heavy emails and they do seem to be doing too badly!
I would also suggest adding stroke=”f” to the or (for rounded buttons) tag to remove black borders around the button and the text in Outlook.
Took us a while of going back and forth with border:none and border=”0″.
Finally compared this new code to the old and found the vml attribute of stroke missing. Adding stroke=”f” fixed that 🙂
Thank you so much for this new technique!
Thanks for addition to arsenal.
The button generator was awesome. It would be great if it could update for 365.
Thanks for the add on Niven
This way has a big problem with Outlook 2007, “mso-hide: all” cut off last part of the latter below this button.
I tested the button you provided and the text is displaying above the button, is there a fix for this yet?
If you set the span width and height to the same as the TD, then the entire area becomes clickable and not just the text. Making this pretty much the most perfect of variant of bulletproof buttons. Also, you can set the style border-radius:5px; (for example) on the TD to round the buttons in nearly all browsers (checked with litmus).
Once the email is delivered, if you try to forward the email (I’m on Outlook 2010) the button duplicates. Is there something obvious I can’t think of to stop this happening?
Stef, email developers the world around would advise against forwarding an email. It’s something we can’t really control as every email client forwards emails differently. Some will show all of your hidden mobile elements, some will display the email with gaps in-between each and every element.
In this case, forwarding is breaking the css declarations used to hide the fallback version which is hidden in Outlook or vice versa.
Thanks for the reply Niven. You are preaching to the convert here regading not fwding btw, I was just wondering if I was missing anything as, although I’ve encountered a ton of HTML email fwd glitches, this was a new one to me. 🙂
Ahh good to hear you know the ways 🙂
We had the same issue you’re having. I built a support email for our support ticketing platform for our clients with this button as our CTA for their specific query.
The back-end guys then had to mould my HTML to fit our Java back-end setup. When testing they were seeing the hidden one in Outlook as well as the Outlook safe button. Even though nothing came up on my live and EOA testing.
Eventually found out they were forwarding it around the team to check if everyone was happy.
D’oh!
I’m having the same issue as lingualeo – Outlook 2007 hides all the content immediately following the button when using this method. Any ideas how to fix?
Thanks for this, very useful!
Wondering if anyone has a workaround for the Gmail iOS app? As it’s just scaling down the whole email, the text in the button is bigger than the button background, so isn’t legible. Working fine everywhere else I’ve tested!
Outlook 2007 breaks with the use of mso-hide: all. Hides too much content! Got around this by removing the mso-hide and wrapping the content in not mso HTML tags.
As a follow up – I solved my issue in the Gmail app (mentioned above) by following these steps to stop the app from resizing the email: http://freshinbox.com/blog/gmail-on-ios-increases-font-size-on-some-emails/
Can anyone confirm that Mike’s solution of removing mso-hide:all and adding non-mso tags to correct the issue with Outlook 2007? Many thanks!
So I’ve discovered a solution I’ll dub “The 2007 Fix”, which I’ve gotten to make this button completely bulletproof for me. I tried everything to get around the bug with 2007, which was necessary because unfortunately Stig’s BP button wouldn’t work in the particular application I needed it in. So in attempt to troubleshoot the button, I stumble upon the fix completely accidentally. It’s worked on two separate occasions now, so I hope someone else can try it and confirm that it works. I suppose that someone smarter than me can figure out what aspect of this can be replaced or altered to be more efficient, but basically I just inserted a 0 height table in between the vml code and the div content for the html button. Basically just this
<!–[if mso]>
<[endif]--> Either place this entire text immediately after the first <[endif]--> which follows the VML code, or simply paste the table after the VML code and the first <[endif]--> like this....
When trying several ‘bullet proof’-button approaches, I stumbled about one thing I can’t solve:
If the button text is dynamic and therefore the button width differs (e.g. depending on the language of the user), it is not working anymore in Outlook. Width: auto; doesn’t work and setting no width at all leads to shrinked buttons/strange linebreaks .
Do you have an idea for a bullet proof button with dynamic text?
I’m having issues with the button label text descenders (gpqjy) getting cut off in Outlook when running at 120 DPI. Any thoughts on how to fix?
I really appreciate posts like this – and we all have different ideas of what “bulletproof” *should* mean. For me, a bulletproof button should:
– Work “everywhere” … well, everywhere I can test in Email on Acid 😉
– Be responsive (text wraps on wider buttons, button scales to 100% wide for smaller devices)
– Not require the button to be built twice (once specially for Outlook) – although I love that this *can* be done if required
– Be wholly clickable (most places, I can put up with a few exceptions, perhaps some Outlooks)
– Support single or multi-line buttons without problem
– Require no widths to be declared anywhere (although widths *could* be declared if desired)
– Support borders everywhere
– Support CSS gradients, round corners, shadows etc
– Allow alignment to be changed without issue
– Allow text alignment can be changed without issue
– Can be modified to accommodate icons
Aiming to hit that brief, I’ve made this, which I think does the trick:
http://codepen.io/robd/pen/KgXzxv
i.. but I’d love feedback
devon.steel – your solution is amazing, it doesn’t work on outlook.com (Office 365) for some reason the right padding doesn’t work
Rachel Wallis – thanks for the feedback! I haven’t experienced the issue you describe with that particular solution – and in my tests it doesn’t show up as an issue in EoA. I don’t want to hijack Geoff’s great thread – but if you want to send me your markup – I’d be interested to take a look – and suggest a solution. dinsdalerob(at)gmail.com
Bit late to this, but @devon.steel’s solution is awesome!
@EarlyBird do you find a solution for width in dinamyc buttons?
None of this work for me on office 365, how can Microsoft still be so horrendous?
Personally I am going to ditch buttons in emails and move to more simple links again as this is just crazy..