The Last Bulletproof Button You’ll Ever Need

27 thoughts on “The Last Bulletproof Button You’ll Ever Need”

1. Hi Geoff,

   This button doesn’t work the way its supposed to in Outlook 2010. Don’t think this is the final button we need.

   Cheers

2. Great bit of code and seems to work great, except in Outlook 2007/10/13 where the button doesn’t obey the height in the code. It snaps to the height of the content. Perhaps some conditional mso tags are needed here for specific code for these clients?

3. Thanks !
   But two things :
   – the center tag is bad 😉 and deprecated : http://stackoverflow.com/questions/1798817/why-is-the-center-tag-deprecated-in-html
   – You can add one more thing in the css : mso-line-height-rule:exactly; for outlook 2010 and 2013

   Otherwise, EmailOnAcid rocks

4. Shameer and Jaina, looks like I had a typo in there. It should work in all clients now.

   Nelson, yes it’s true. In email we sometimes work with deprecated code. But I have found that this helps the button center in Yahoo! Mail in some cases. Feel free to leave it out if the button works for you without it.

5. Hey – any reason why the button doesn’t snap to 100% width on mobile? I think that’s a great feature to have – thoughts? I’ve used that in previous buttons.

6. Phil,
   You could make that kind of enhancement using media queries, but I didn’t include it here. I wanted to make these buttons simple enough to drop directly into an email design. Media queries add another layer of complexity.

7. Thanks again Email on Acid and Geoff. I’ve been using your previous bulletproof button exclusively. Really awesome to see iteration and community involvement.
   Cheers!

8. Hello!
   That looks great. I have two questions from the Mailify team:
   – Why use tables for the upper and lower spaces before and after the button?
   – Is the lineheight on the tag to get all the height clicable really useful?

   Thx Geoff!

9. Paul,
   I chose to use tables because they provide consistent spacing across all email clients.

   The line height (and clickable button area) is included to increase usability on mobile devices. It can be a bit harder to hit the text just right with your finger, but easy to hit a big colored button.

   Thanks for your questions!

10. I recently tested different email clients to assess support for the border radius- Outlook 2011 and 2016 *will* show the rounded corners, but the rest won’t.
    FYI here’s the list-
    Border Radius Supported:
    Android 2.3
      Android 4.2
      AOL Mail
      Apple Mail 8
      Gmail
      Gmail App (Android)
      Google Apps
      iPad (Retina)
      iPad Mini
      iPhone 5s (iOS 7)
      iPhone 5s (iOS 8)
      iPhone 6
      iPhone 6 Plus
      Office 365
      Outlook 2011
      Outlook 2016
      Outlook.com
      Thunderbird 31

    Border Radius Not Supported
    Yahoo! Mail
    Windows Phone 8
    Outlook 2013 120 DPI
    Lotus Notes 8.5
    Lotus Notes 8
    Lotus Notes 7
    IBM Notes 9
    BlackBerry 5 OS
    Outlook 2000
    Outlook 2002
    Outlook 2003
    Outlook 2007
    Outlook 2010
    Outlook 2013

11. I’m using this code and it still doesn’t look right in Office 365. Is anyone else having that issue?

12. Ali,
    What doesn’t look right? Can you add a shared test link with code analysis? I can help you fix any problems that may have occurred.

13. All due respect, calling this button ‘bulletproof’ is a bit of stretch. If you use this button more or less as you have it set up here, it’s fine. But change the background color to a lighter color, *without* changing the color of the border to match and you’ll quickly see where this button fails. Since you’re using the tag to set the border, and a padding:10px in the same tag to create the height, I assume for Outlook, the border doesn’t span to the width of the background color. Then if one starts messing with the width, the font size, the combination of padding, border and line height can create a bit of mess.

    It’s a good start, but it’s far from bulletproof.

14. CPuffer,
    Thanks for the feedback! You certainly need to know HTML to make this button continue to look good. The border color is actually kind of unnecessary, unless you want a different color there. I’ll take this into account for our next iteration.

15. Geoff, Well the border color is only unnecessary until the designer gives you a button with a border color that’s different than the background color. 🙂

    Once again it’s Outlook that’s foiling your best intentions.

    https://www.emailonacid.com/app/acidtest/display/summary/P3ihBIRNZVRRJ0HPks8cu20uUH8o827eAYGetXxEgYdj5/shared

    All I’ve done with this test is change the background color & text color. And in the first one add a few more words to create a wrap.

    This table-based button has an advantage over that other ‘bulletproof’ button on the web, in that you’re not using the line-height to create the button height. But as you can see from the linked test, wrapped text in Outlook looks even stranger. It looks like Outlook is ignoring the width:150px i the tag, which means it’s going to take a bit of futzing with the padding to align border to line up with the width of the button. I tried moving the border to the containing but then you lose the padding.

    My problem with this as bulletproof, is that once you break out of the parameters of what you built it is kinda a crap shoot. There’s a lot of inline styles targeting the same issues; this, of course, is the nature of email coding. But what I need to do is start stripping them out and seeing what are absolutely necessary.

16. All that said, sorry if I’m coming off a overly critical. I don’t mean that. I’m trying to figure out how to take the best features of this — full-button clickable area, works in GMail app — and make it work in Outlook with a border.

    *shakes fist at Outlook*

17. this is great, though it doesnt work correctly with
    tags in 2007, 2010, and 2013, if you want 2 lines of button text.

18. Here was the hack I added to make the height of the button work in Outlook > 2003. Don’t ask me why a span above and a div below. That’s just what worked best for me.

    
    <!–[if mso]> 
    Call To Action
    <!–[if mso]>

     

    I also moved all the a.button_link styling into the CSS. I have to run an inliner anyway, so better to keep it organized for my own sake. And for having consistency with multiple buttons in an email.

19. It’s a great button/tutorial. Thanks Geoff! Out of curiosity, why is there a even a class on this button? All of the styles appear to be inline anyway. Am I missing something here?

20. Thanks Ryan! The class is there for any styles you might want to add. It’s not used in the example.

21. For what it’s worth, this button doesn’t work in Lotus Notes. The padding and label color isn’t applied, so for me I get a small dark blue rectangle with a blue label.

22. Thank you so much for this, I was fighting for days with Outlook. This code finally made my button work as intended.

23. This wasn’t working on mobile when viewed in Outlook 2016. I made some tweaks for it to work:

    – moved the background colour to the table element
    – removed the padding CSS and used “cellpadding” for the table instead
    – removed “width” declarations on TD or in CSS

    Example code:

    REGISTER

    1. Thank you Austin –

       When I made my border a different color from the button, the bgcolor of the kept spilling out behind the in Outlook.

       Moving bgcolor from td to table + removing width on the td solved it!

       1. Oof, EOA stripped the tags from my comment ^^

          The problem was that the td bgcolor kept showing behind the a bgcolor in Outlook.

24. is there a change I can make in the code to make the button open in a new window?

    1. Hi J —

       You would use target="_blank" just before the href to have it open in a new window.

       Hope that helps!

Comments are closed.