Bulletproof CTA buttons are designed to render perfectly across all inboxes and to show no matter what. Follow us into a hands-on tutorial to build your own bulletproof emails.Â
This post originally appeared on our sister blog Email Design Workshop
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 renders across all inboxes and, because itâ€™s HTML code and not an image, the CTA button will always be shown, 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 little bit tricky for some. You can either turn a standard CTA button bulletproof by adding a fewÂ lines of HTML codeÂ or check that the email editor that youâ€™re using generates bulletproof buttons (and that those buttons are not simply images). Weâ€™ll look at how to design a bulletproof button with the use of theÂ BEE email editor.
How a bulletproof CTA button should look
Letâ€™s start with a look at the bulletproof CTA button from a Skillcrush email. For reference, hereâ€™s the full email:
And hereâ€™s a close-up of their unique call-to-action button:
Itâ€™s a refreshing change of pace fromÂ the typical â€śwebinar blueâ€ť button weÂ often see, like this one:
Notice how Skillcrush uses smart design tactics for its CTA button, which in turn reflectÂ its modern, feminine, and personable brand:
- The button is on-brand pink with bright white text
- Itâ€™sÂ the full width of the email and doesnâ€™t have a bulky outline (like the black one around the â€śRegister Nowâ€ť button), evoking a light, modernÂ feel
- â€śClaim your spot,â€ť with the use of a personal pronoun â€śyour,â€ť has anÂ approachable, friendly tone while still directing readers to act
But perhapsÂ the most important design feature ofÂ the CTA button is that itâ€™sÂ bulletproof, meaningÂ the button is written in HTML so that it fully renders on all inboxes. We can see how the button is shown even with images turned off on iPhone:
Letâ€™s now get much more hands-on and see how to design a bulletproof CTA button ourselves and recreate the Skillcrush CTA button. Weâ€™ll be using theÂ BEE email editor, which generates bulletproof CTA buttons.
Video Overview: How to design a bulletproof CTA button
As a quick overview, hereâ€™s our video tutorial on how to design the bulletproof CTA button from the Skillcrush email in the BEE email editor:
A step-by-step guide in the BEE editor
Letâ€™s walk through how to easily create a stellar CTA button in the BEE editor, where we have full customization of width, border radius, border color, padding, and color and text styling.
To get us started, we took a couple minutes to recreate the top portion of Skillcrushâ€™s email,Â populating aÂ basic one-column templateÂ with the header image and intro content. Now, letâ€™s create our button!
Over in theÂ StructureÂ menu to the right, weâ€™ll grab a button content block and simply drag it into the body of our email.
Notice that the default button is blue, rectangular, and centered on the page:
But thereâ€™s a lot we can do to customize it! To match Skillcrushâ€™s button, weâ€™ll need to:
- Change the background color
- Update and style the text
- IncreaseÂ theÂ width and adjust the padding
- Insert a link
In the body of our email, weâ€™ll click on the button structure to activate it, then start making our adjustments in theÂ ContentÂ menu on the right.
First, weâ€™ll set the button color to pinkÂ (#F16059 in hexidecimal format) to match Skillcrush.
Then, weâ€™ll update the text. As we type, the button automatically widens to accommodate our content:
We can keep our default font color (white #ffffff), font family (Arial), and font size (16px), but weâ€™ll make our messageÂ bold (and be sure to type in all caps).
Full button width
MakingÂ the button stretch to the full width of the email body is easy. Back in theÂ Content PropertiesÂ menu, weâ€™ll adjustÂ the width slider to the right, up to 100%. From a design perspective, the full width makes sense: it mirrors the Skillcrush header at the top of the email, providing an aesthetically pleasing balance, and it also givesÂ mobile readersÂ more space to click.
UnderÂ Content Padding, weâ€™ll make sure we have a padding of 5 px top and bottom. Letâ€™s also remember to insert a link to the button: in the sameÂ Content PropertiesÂ menu weâ€™ve been working from, weâ€™ll scroll to theÂ ActionÂ section and paste in our link.
Now, we have a fully functional bulletproof CTA button, identical to the Skillcrush email! Wasnâ€™t that easy?
If you would like to further customize the CTA button, here are a few additional button design settings in the BEE editor:
You can adjust theÂ Border RadiusÂ to change your buttonâ€™s shape. From a design perspective, rectangular elements generally connote a senseÂ of traditionalism, practicality, and balance, while circular elements can be perceived as softer and calming.
Hereâ€™s a rounded version of our CTA button after adjusting theÂ radius toÂ 25 px:
We can also make the button taller (or shorter): make sure the â€śMore optionsâ€ť button is turned on in theÂ Content PaddingÂ section, and bump up theÂ top and bottom padding.
Hereâ€™s our button with an upper and lower padding of 20 px.
Another adjustment we can make is the color and width of the buttonâ€™s border, found under Content Properties in the BEE editor. Notice how we have granular control on borders.
The traditional â€śRegister Nowâ€ť button we looked at earlier had a thin black line around it. In theÂ BorderÂ settings in the BEE editor, we can play with different colors and thicknesses. A thin, light border adds a bit of depth:
And slightly thicker, darker border is more prominent but has a similar effect:
Switching to a totally different color generally detracts from the light, modern feel of the button:
But a border can also be useful in maintainingÂ a light, airy, and modern look if weÂ omit a background color, like this:
As you can see, we could spend probably all day customizing a CTA button in the BEE editor!
Our bulletproof CTA button design takeaways
As youâ€™re designing your own emails and customizing your bulletproof CTA button, hereÂ are the key thingsÂ toÂ keep in mind:
- Buttons should be on-brand, too. Skillcrush does a great job of demonstratingÂ how a well-designed button can go a long way in reflecting your brand so you can connect withÂ yourÂ audience. Play with colors and styles to achieve a look that matches both your brand identity and your emailâ€™s aesthetic. The button should attract attention (it should be obvious that itâ€™s a button) but not stick out like a sore thumb.
- Balance the size of your button.Â Bigger isnâ€™t always better. Donâ€™t make your readers feel like youâ€™re shoving a demandÂ in their faces.Â Strike a balance by making your button wide if itâ€™s not too tall, or by making it a little taller if itâ€™s not too wide. Remember, readers on mobile devices or tablets should be able to easily click with a fingertip, so allow ample white space around your button.
- Donâ€™t forget content!Â â€śRegister,â€ť â€śLearn more,â€ť â€śSign up,â€ť and similar CTAs are overused. Think about how you can customize your message in a way that reflects the tone of your brand. Be sure to use a clear, direct action verbâ€”and be concise. Try using personal pronouns like â€śmyâ€ť and â€śyourâ€ť that make your message friendly and engaging. You could try: â€śReserve my spot nowâ€ť or â€śGet my free ticket.â€ť
- Placement is key.Â Research has shown that placing a CTA button below the fold actually increases clicksÂ by 304%! Let readers know what theyâ€™re signing up for firstâ€”with great copy and visualsâ€”thenÂ invite them to act. Skillcrush does exactly this by placing their CTA button last.
- Be bulletproof.Â Above all else, itâ€™s critical that your button looks great and works as it should, no matter the device or email inbox. Always use HTML instead ofÂ an image. Weâ€™ve seen that in the BEE editor, all buttons are bulletproof, so youâ€™ll never need to worry about how theyâ€™ll render!
We have to ask: are your CTA buttons bulletproof? What did you think of our button design tips? Share your ideas and thoughts in the comments below!