
Earlier this week, we gotinspired by the email design of a recent webinar invitation email from Skillcrush, a coding academy that focuses on teaching women how to code. Their webinar invitation email had all the relevant information—event time, cost, key details, and a way to register—but they didn't get boxed in by the standard, bland email template we so often see... and that we start to tune out. Instead, they created an engaging, personality-packed webinar invitation email. There's plenty to learn from! Check out our email design tips on How Skillcrush Built a Unique Webinar Invitation Email.In today's workshop, we're going to focus on a key design element of the Skillcrush email: the bulletproof call-to-action (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.
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 abasic one-column templatewith the header image and intro content. (For a step-by-step guide on how to set up a modular single-column email, check out this workshop post).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.
Finishing touches
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:
Border radius
You can adjust the Border Radius to change your button's shape. From a design perspective, rectangular elements generally connote a senseof 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 theradius to25 px:

Borders
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 (to learn more watch a quick video tutorial 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 maintaininga light, airy, and modern look if weomit a background color, like this:

As you can see, we could spend probably all day customizing a CTA button in the BEE editor!