How to Design High-Converting Call to Action Buttons
A well designed call to action button says "click me" in many ways, whereas a poorly designed button may be missed entirely.
In today's tutorial, you'll discover the subtle (and not so subtle) details that make for great, conversion focused button design. Plus, you'll see how you can quickly create many different button styles in Thrive Architect.
Here are the main points covered in the video:
The Basic "I Am a Button" Signals
Starts at 00:47
How do we recognize a button as a button in the first place? In the video, we start with the very fundamentals - the minimum requirements of what makes a button look like a button. In this part, we also cover the basic controls in Thrive Architect that you can use to change the shape and size of your buttons.
How to Amplify the "Click Me" Factor
Starts at 03:30
This is what the button ends up looking like, with all the "click me" factors applied:
This part of the video is where we get into the conversion design aspects - the stuff that makes a button attract more clicks. This includes:
- How a button should have a very clear affordance of being clickable. Basically, it should signal strongly that it's an element you can click or tap on.
- How to add a hover effect (and why a hover effect alone isn't enough to signal clickability).
- How to ensure that the button is high up in a page's visual hierarchy.
- How to visually "lift" the button off of the page, to make it more attention grabbing and to amp up the "click me!" factor.
How to Create a Ghost Button
Starts at 07:35
Here's what our ghost button looks like:
A ghost button is a button that is transparent with a thin colored outline, which switches to a full color fill on hover. It's a fairly popular button style, despite not being that great in terms of how noticeable and clickable this kind of button is.
In this part of the video, you'll see how you can quickly create this button style in Thrive Architect. You don't have to create a button like this from scratch though, since we have a pre-made template for it already. :)
How to Create an Old School Button
Starts at 10:24
I call this button style "old school" because it uses gradients and shadows to look like a 3-dimensional button you'd see on a dashboard in real life. The cool kids call this a skeumorphic style, and it's not in fashion to design like this anymore. Although with how fast the world of the web moves, I bet it's about to come back into style any moment now.
At any rate, it's a nice looking button style and it checks the boxes for conversion design as well.
How to Create a Funky Icon Button
Starts at 13:55
In this part, I create another button style from scratch, mainly to show off the cool things you can do with the button icon feature, gradients and shadows used as outlines.
How to Save & Reuse Button Templates
Starts at 17:04
Like any element in Thrive Architect, you can save any button you've styled for later reuse. What's even cooler is that your saved buttons are available very conveniently, in the button element's style drop down.
Buttons With 2 Lines of Text
Sarts at 18:09
Another nifty feature in the Thrive Architect button element is that you can have two lines of text. In this part of the video, I show how the feature works and create an example of a button where having two lines of text makes sense.
Updated Save Template Flow
In order to save your button as a template and easily use it again on your site, you can not simply click on the green "save" icon in the bottom left corner of the selected button.
Learn more about templates and symbols here.
Over to You
How did you like this tutorial? Which of the button features in Thrive Architect do you like the most? Let us know by leaving a comment!