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.
More...
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.
Click on the save icon in the top left corner
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!
Great video as usual Shane!
One suggestion is to have all the clickable links in the article open in a new tab so I do not lose my place in the original article?
Thanks
Thank you for your suggestion, Sherwood. We generally open internal links in the same tab and external links in a new tab. To be on the safe side, you can Ctrl + click on everything, if you want to make sure to keep the current tab. 🙂
Hi Shane – as always I love to read everything in your posts and all comments – I often do this on an Android tablet – I don’t see an easy way to ‘return to top’ – would be great to add a button at the end of the comments to ‘return to top’ of comments, also, in the top of comments where it allows sort please add to sort to ‘my comments’ as an option – thanks for all your great work – hoping all is going well getting the new theme closer to release – on tender hooks!
And another great and useful tutorial for all of us. I think I´m more of a “Ghost Button Fan”.I simply like the way it looks, which seems minimalist and effective.
Thank you Shane.
Thank you for your comment! The ghost button looks cool, yes. It is a case of style of functionality, though.
Have you guys tested each of these buttons against each other to determine which gets more clicks and higher conversions?
Be great to see this… but I know he’s nailed it with the orange bg (just ask Patel, Kern, Deiss etc). Orange is also a “buying” color… why do you think Home Depot choose it? 😉
I picked orange because it looked nice. This kind of thing is much too context dependent and I’d never go so far as to say that one color will lead to more sales than another.
Thank you for your comment, Matt!
We have not tested these buttons against each other and if we did, the results would be meaningless outside of the context of the test we ran ourselves. Dave wrote a good post/ about why there’s no such thing as “the highest converting button design”. And if you want to dive deeper into the topic I recommend this post as well.
In short, conversion optimization is highly context dependent. There are no absolute truths.
Nice Shane, didn’t know about the secondary text option, good addition.
Would it possible to make vertical buttons, say- just turn the whole button 90˚ counter clockwise. You might ask yourself why would you need such a button in the first place. It was a question from a client.
We can’t rotate elements in Thrive Architect, no. It’s planned as a future feature, but it’s pretty far down the development roadmap.
Thank you Shane. It is great what you show here.
OK. I have created my perfect button and have saved my template. Now I can manually apply this template to all buttons on the page. But what next???
A day later I want to change my perfect button and to update the style of all the same buttons on the page. How??? I do not see a way how to do it. There is no possibility to edit and update the template. There is no pssibility to save updated teplate under the same template name (and thus update the existing template). Unfortunately 🙁
So the only way now is to create a new template and to apply this new template to all the buttons manually? Really? They may be many of them…
I would love to have the possibility to edit/update the existing style and I would love this style to be automatically applied to all buttons of this style/class. The question is: Can we save the template as a class?
Hello Martin,
What you’re describing is something that’s still a work in progresss. We’ll have a teaser to show about how this will work in the future, pretty soon.
Very helpful content – thanks a lot!!!
Thank you, Heiko! Glad to know you found this useful.
Shane, you totally missed an opportunity to show off the ability to animate the button with the “grow” animation on mouseover!!!
Also, let’s get more animation options in there…
It really can’t take much for a developer to include more and it’s been weeks and weeks since any significant Architect feature updates.
The ability to have a call to action button randomly “wiggle” or “vibrate” automatically on a page every 15 seconds or so would probably impact the CTR as well!!
Thank you for your comment, Derek. We will be updating the animation options in Thrive Architect, but there are several much more impactful features that we will finish first.
Great stuff as usual. Keep it coming!
Thank you, Lazlo!
Definitely another awesome tutorial that over delivers in every way!
Thank you very much, Matthew!
Great video. Very clear. Thank you Shane
Thank you for your feedback, Martin!
How about making a landing page template with a bunch of cool buttons you have used so we don’t have to reinvent the wheel?
Thank you for the suggestion, Christine! We may add a new bonus page for this, yes.
Getting back to basics and more granular content…. awesome!!!! One tutorial I would love to see is one that covers line height. What is it?
Thank you for your comment, Santiago!
And thank you for your suggestion, regarding line height. I could definitely put together a small guide on that. 🙂
I love it! More and more features out here! Thank you very much for full tutorials
Thank you! Glad you enjoyed this tutorial. 🙂
At first I was like, a 20 minute video on just buttons?
But the video was an excellent refresher on CTA buttons and the principles behind the design.
I agree with the other comments on animation. Right now the on-hover animation for elements don’t seem to return back to their state. It would be cool, if they animated back to their original state after hover ends.
Thank you for your comment! We will be updating the hover and animation features in Thrive Architect. We’ve got some higher priority features to finish first, though. 🙂
Is it possible to set a manual value for the time delays between default and hover states of elements?
No, we don’t have such a feature.
Thanks for the video. I already use the template features, but didn’t know the button templates show up in the button menu.
A feature request related to templates: Thrive Architect shortcodes. Today I created a background section that I wanted to use on multiple pages. I (mis)used Thrive Leads shortcodes for this. I first tried to create a page with just this background section and included it on another page with a page include plugin. But that didn’t work. Thrive Leads shortcodes was the workaround.
Another use case for Thrive Architect shortcodes: I want to build a very rich footer with video’s, testimonials, logo’s and other info. I want to use this footer on all blog posts and some pages. I currently don’t know how to do this. Not with focus areas (sorry, they are horrible and a PITA to work with…), not with footer widgets (way too limited) and not with page includes.
Any chance this will be available in the (near) future?
Thank you for your comment, Wouter.
We won’t be introducing shortcodes, no. However, we are working on a header & footer system that you’ll be able to use for what you described.
Thanks for making me feel like a pro designer – again! Love the total control of every aspect… One question, was it intentional for the default button colour to be so completely vile? Maybe so that we would HAVE to change it? (or is that just me?)
I’m glad it makes you feel empowered like that, Kylie! 🙂
As for the default button color: I’m afraid that’s entirely subjective.
Why is you default button not like what you think a button should look like?
All the fanboys are celebrating this video, when I ask if it is even necessary.
Sorry to say this, but you are falling in love with the design capabilities of thrive architect, rather than with making the lives of your customers better.
Check the pre-designed buttons that are available in the style menu. They include variations that have these attributes.
That’s a bit of a wild accusation. You don’t have to use the ideas but others may find them useful for their purposes.
Thrive are continuously providing valuable information, something not seen by many other marketers and designers.
Hi friends.
Does anyone know how to re-create the “read more” button which is on the Thrive Themes blog?
It is styled differently to the default button on the Focus blog…
Thanks
Shane, this is a little off the subject – If I place a button in a column on the left side of paragraph column is there an adjustment that would allow the stacking order to allow the paragraph on the right to stack on top of the button in mobile view? TCB 1.5 had a checkbox that allowed this.
Great share, just what I needed! Tx!
Thank you for continuing to create great new tutorials!
nice
I would be interested to hear thoughts on the use of different text and how that affects conversion: eg: BOOK NOW vs CHECK AVAILABILITY or ORDER vs VIEW SIZES
Unlike button colors, button texts can actually be worth testing.
As a rule of thumb, action oriented and benefit oriented texts tend to do better. For example “Get the Ebook Now” is better than “Submit” on an opt-in form button.
However, beyond that, I would hesitate to lay out any general rules for button texts. As always with conversion optimization: everything is very context dependent. What works great in one scenario might not work at all in another.
Thanks for the great tutorial!
It would be nice to have a feature of jumping or bouncing buttons to get more attention of visitors.
Thanks for the suggestion, Roland!
I always look forward to your videos Shane and almost always will build what you are building along side of you. It’s time consuming but a great way to learn.
You always ask if there is anything we would like to see, so here is my wish list:
I spend a good portion of my time writing articles/posts and would love to see some design ideas/videos that would help improve the presentation of posts. In addition my audience is over 70% responsive, and over 85% responsive and tablet.
Also, I have seen on websites, at the bottom of posts: “Download above post as a PDF”. If there were some easy way to be able to do this from Architect that would be pretty cool!
Along that same vein, I saw an application recently that allows the user to choose their posts and collate them into an ebook. Also, pretty cool!
Thanks again for all the support videos!
Grant
Thank you for your comment, Grant!
Regarding blog post formatting, here’s a tutorial that I think you’ll like: 5 Content Templates for Your Blog Posts
For turning posts into PDFs, I don’t know of a simple way to do this. We’ve discussed this internally, but so far, our conclusion was that the effort it takes to make this work well is probably not worth the benefit you’d get from having the feature on your site.
Any plans on typekit/typography.com coming soon guys?
Hi Shane. Great VLOG post. I like your ‘style’. 🙂
On the topic of new features, I would love to see a way of identifying which images are in use by Thrive Architect on website pages. This would help us to delete unused images that may have played a prt in early drafts of the website.
Hi Shane.
Any progress on a tutorial to explain correct use of z-index and when to use auto, relative and absolute?
gonna try 2 lines of text button, thank you for sharing
Thanks for your comment, Chris!
I really love Thrive products. Amazing what I can do.
Congrats to the team!!
Thank you, Marco!
Great video tutorial and I agree with an earlier comment that it makes me feel empowered as a designer ~ competent even.
Thanks.
Thank you for your comment, Kathryn. That’s very encouraging and I’m glad it makes you feel empowered. 🙂
Great content. I binged watched several Thrive videos and noted I can’t watch the videos in full screen. When I click the full screen, it only plays the video with a white background and doesn’t make it full size.
Hi Shane,
I appreciate how you’ve taken us through each of the different steps needed to design each button. You’ve made button design fun again! Thanks for showing how easy it is to save and access these as templates. This will save me a lot of time.
Thank you for your comment, Sharon! It’s really encouraging to get feedback like this, on my tutorials. 🙂
Very helpful content. My site is looking better already. Thanks!
Wonderful Awesome Technique. Thanks Shane!
Hi There,always helpful article.There are some problem with the Facebook like box in mobile.Its not responsive and the box more in width than the actual mobile screen..Hope you will fix it.
Thank you for the heads up. We will look into this.
Hey Shane,
Honestly, I had completely forgotten about the ‘ghost button’ design. Tried it on a website I was working on and it works like a charm!
Just wanted to say thanks. Sometimes the simplest and shortest posts give you the best ideas.
TimB
Thank you, Tim! Glad you found something useful here. 🙂
Great video as always. your videos are really what makes Thrive themes so usable for me. Thanks!
However, when I tried to save my button template, I do not see “styles and templates” only “styles” section. It must have changed just in the last day or two because I save a button template earlier, but now (after watching this great video) I wanted to save the most recent changes and I can find nowhere to save the design template?
What did I do wrong?
Hi Bob,
I’ve updated the post. The “save template” option can now be found in the top left corner of each element.