What is “bulletproof button” design?
Still have a question, spotted an error, or have a better explanation or a source we should cite?
You've got a beautiful email with a killer call-to-action button. Your designer made it from an image. Looks perfect. Then your recipient opens it in Outlook, image blocking kicks in, and your button vanishes. No image. No button. Just blank space where your CTA used to be.
A bulletproof button is the solution to that problem. It's a call-to-action button built from HTML and CSS instead of images. It stays visible even when image blocking turns on. For Outlook, which doesn't always respect modern CSS, you add VML code as a fallback. The result. A button that works everywhere, regardless of image settings.
Why this matters comes down to clicks. If your call-to-action disappears, your recipients can't click it. Image-based buttons are fragile. HTML and CSS buttons are resilient. They render consistently in Gmail, Apple Mail, Outlook, and most other clients. Your CTA needs to work for everyone. Not just people with image loading turned on.
And don\'t code this from scratch if you don't have to. Campaign Monitor has a free bulletproof button generator that spits out the HTML and VML for you. Plug in your colors, text, and link. Copy the code. Done. Your button won't disappear.
Contributors
Who worked on this answer
Every name links to their profile. Every company links to their site. Real people, real accountability.
