What a bulletproof CTA button should look like Video Overview: How to Design a Bulletproof CTA Button A step-by-step guide to the BEE editor Our Takeaways for Bulletproof CTA Button Design Bulletproof CTA buttons are designed to show up perfectly in any inbox and to show up no matter what. Follow us through a hands-on tutorial to create your own bulletproof emails. In today's workshop, we're going to focus on a key design element of an email from Skillcrush : the bulletproof CTA button . But first, what does bulletproof mean ? It's a term used by email professionals for a CTA button, written in HTML, that shows up in all inboxes , and since it's HTML code and not an image, the button CTA will always be displayed, no matter what.
Now that we know what a bulletproof button is, the next step is to figure out: how do we design one? And this is where it can be a bit tricky for some. You can either make a standard CTA button bulletproof by adding a few lines of HTML code, or check that the email editor you're using generates bulletproof buttons (and that those buttons aren't just images ). We will see how to design a bulletproof button using the BEE email editor. What a bulletproof CTA button Image Masking Service should look like Let’s start by looking at the bulletproof CTA button of a Skillcrush email . For reference, here is the full email: Bulletproof CTA by Skillcrush And here's a close-up of their unique call-to-action button: CTA It's a refreshing change of pace from the typical "webinar blue" button we often see, like this: Blue bulletproof CTA Notice how Skillcrush uses smart design tactics for its CTA button, which in turn reflects its modern, feminine, and fun brand: The button is pink on the mark with glossy white text It 's the full width of the email and doesn't have a bulky outline (like the black around the "Sign Up Now" button), evoking a light, modern feel.
"Claim Your Place," using a personal pronoun "your," has an approachable and friendly tone while urging readers to take action But perhaps the most important design feature of the CTA button is that it is bulletproof , which means the button is written in HTML so that it fully displays in all inboxes. . We can see how the button appears even with images disabled on iPhone: Bulletproof CTA on iPhone Now let's look much more concretely and see how to design a bulletproof CTA button ourselves and recreate the Skillcrush CTA button. We will be using the BEE email editor, which generates bulletproof CTA buttons. Video Overview: How to Design a Bulletproof CTA Button Here is a quick preview of our video tutorial on how to design bulletproof CTA button from Skillcrush email in BEE email editor: