Let 's see how to easily create a stellar CTA button in BEE editor, where we have full customization of width, border radius, border color, padding and color and text style. Bulletproof CTA with BEE To get started, we took a few minutes to recreate the top portion of the Skillcrush email, populating a basic one-column template with the header image and intro content. Now, let's create our button! From the Structure menu on the right, we'll grab a button content block and simply drag it into our email body. Bulletproof CTA with BEE Note that the default button is blue, rectangular, and centered on the page: CTA button But we can do a lot to personalize it ! To match the Skillcrush button we will need: Change background color Update and style text Increase width and adjust 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. button color First, we'll set the button color to pink in hex) to match Skillcrush.
CTA color Next, we'll update the text . As we type, the button automatically expands to fit our content: Bulletproof CTA We can keep our default font color (white , font family (Arial), and font size (16px), but we'll make our message bold (and be sure to type all caps). full button width It's easy to stretch the button across the width of the email body . Back in the Content Properties menu , we 'll adjust the width slider to the right, up to 100%. From a design E-Commerce Photo Editing Service perspective, the full width makes sense : it mirrors the Skillcrush header at the top of the email, providing aesthetic balance, and it also gives mobile readers more room to click. CTA content width The final touch Under Content Padding , we'll make sure to have 5 px padding at the top and bottom. Let's also not forget to insert a link to the button : in the same Properties menu of the content from which we worked, we will scroll down to the Action section and paste our link.
Bulletproof CTA Now we have a fully functional bulletproof CTA button , same as Skillcrush email! Wasn't it easy? Bulletproof CTA - done! If you want to further customize the CTA button, here are some additional button design settings in the BEE editor: border radius You can adjust the border radius to change the shape of your button . From a design perspective, rectangular elements generally evoke a sense of traditionalism, practicality and balance, while circular elements can be perceived as softer and soothing. border radius Here is a rounded version of our CTA button after adjusting the radius to 25px: Bulletproof CTA with rounded edges Button padding We can also make the button taller (or shorter) : make sure the "More options" button is enabled in the Content Padding section and increase the top and bottom padding. Padding Here is our button with 20px top and bottom padding. Limits Another adjustment we can make is the button border color and width