17 min read10 Tips for Designing Click-Worthy Buttons. With Real-Life Examples!

Jul 2, 2018 | 0 comments

Think about all the times you signed up for something. Newsletter, e-book, resource library, e-course…you name it. Chances are, you did not know exactly what you are signing up for though. So what made you click the button and type your email address?

I’ll tell you what.

Eye-catching design and compelling copy.

This is a strong combo that can help you not only quickly catch the visitor’s attention but most importantly it will make them feel like they want to sign up for this deal.

Wait a minute, I almost hear you thinking “I am neither designer nor copywriter, how can I do this on my own?” I feel you and keep reading because this article is right for you! I will show you (on real examples) the best practices, things to avoid, and 10 tips how you can design click-worthly buttons on your own.

Let me share with you some:

* Did you see some really great call-to-action buttons online? Share the link/screenshot in the comments and tell us why did you like them!

Great Design Practices

1. Above the Fold

If you have one main offer that you want people to see, place it above the fold. By that, I mean it should be visible immediately when someone enters your website. Above the fold means before they scroll down.

You can do that by creating a main banner section or by placing the call-to-action button into website menu itself. This variation has one big advantage – the button will be visible everywhere, no matter the page your readers will visit.

Take Mailchimp as a great example:

#3333332. Make Buttons Look Like Buttons

Making sure your call-to-action buttons look clickable is the first and I would say most important step. If your button doesn’t really look like a button…well nobody will even consider clicking on it.

One of the great ways how to do that is adding a hover effect. This way if someone goes over the button with the mouse, it changes its color/size, moves a bit, add shadow, or generally shows this is an interactive and clickable part of your page.

And don’t worry, WordPress, Squarespace, Wix and other CMS will give you the button hover option for sure!

3. Make it Pop

Even if experts disagree on how much time exactly it takes for us to leave the website, average statistics say it’s under a minute. That means it’s absolutely crucial that your call-to-action buttons are visually striking.

Make sure it stands out from the page while still fitting into the overall design theme. 

A great way (even if a little weird one) how to be sure the buttons are noticeable is when you cross your eyes. When you take a look at the website like this, the most important parts should stand out. You can also blur a screenshot of your site in Photoshop to try this. In case you have more buttons to choose from, this is also a great way how to determine if the more important ones are really the most visible ones.

Here is an example of my website.

4. Well, Size Matters

The size of buttons also plays a key role in helping users to identify these elements.

Make them big enough for users to really notice them, but not too big to overwhelm them.

Your call-to-action buttons should always have a healthy chunk of white space surrounding them. Why? White space actually helps attract the users’ attention to your button and helps it stand out.

Even more importantly though, ensure they are mobile-friendly (also called finger friendly). There should be enough of space around them so you are really able to click the one specific button you want and you don’t accidentally press another one.

5. Less is More

We tend to suffer from the choice paradox – the more choices we have the harder it is to select only one option. Give your users straightforward options and don’t overwhelm them with too many choices.

Remember, they will spend only 1 minute on your website per average so this time, the less is more because it means quicker decision process

Great Copy Techniques

6. Compelling but Short

Apart from design, you can make sure that your visitor knows exactly what you want them to do by a clear button copy. Don’t confuse the reader with too long phrases or unclear messages. Telling the user specifically what they should do works very well, which is why you can see so many “Subscribe”, “Sign Up”, Buy The Product” buttons.

The truth is though, some words work better than others. Take a look at this amazing list of compelling words that really convert.

7. Free Offers and Reverse Psychology

F R E E is probably one of the most effective words for getting attention in the English language

Who doesn’t like things for free? And especially when the other option says “No thanks, I don’t want things for free”?

As cheesy as it sounds, buttons like these work really great.

8. Increase the Trust

The biggest fear when signing up for something? Oh yeah, that you won’t be able to cancel it if you don’t like it. Am I right?

Tell your visitors that clicking the button is safe, for example like Dubsado did it with their risk-free button!

Other phrases that make your visitors feel safe:

  • Best-selling
  • Cancel Anytime
  • Certified
  • Endorsed
  • Guaranteed
  • Ironclad
  • Lifetime
  • Moneyback

9. Add Urgency

When it comes to your buttons, the urgency is a strong catalyst that inspires action. Great examples are:

  • Get it now.
  • Buy it today.
  • Get Instant Access

Using urgency words like “Today”, “Now”, “Close”, “Only”, “Act”, “Now” will much likely get you the clicks because it rushes people into action right at this moment. And that is exactly what you need.

10. Spark The Curiosity

This is my most favorite way how to make your button really compelling. We see so many “subscribe/sign up/buy” buttons every day, that seeing something a bit different and unique immediately catches our attention.

People click because they are insatiably curious. Curiosity is one of psychology’s “intrinsic motivations.”. Whats even better, the more curious we are, the easier it is to remember not only information about that topic but also other unrelated information shown at the same time! Isn’t that something we should use within out marketing?

That is why I have some amazingly creative call-to-action examples that I found online! Let me know in the comments what you think about them, would you click?

* Did you see some really great call-to-action buttons online? Share the link/screenshot in the comments and tell us why did you like them!

Final Thoughts

Target the buttons to your audience. Use psychology of colors to determine the right colors for your main call-to-action buttons and make sure all texts are properly readable. Most importantly though…

Test Buttons Like Your Life Depends On It.

Testing buttons and knowing your conversion numbers is absolutely vital! You can even try your first A/B testing on them because even small, easy-to-make changes can have dramatic effects. Test placement, color, style, size, copy. If you can think of it, you can test. 

HI, I AM ZUZANA!

The creative mind behind MedleyThink design studio! A brand designer who loves helping others fall in love with their own brand.

Think about all the times you signed up for something. What made you click the button and type your email address? I'll tell you what and how can you design click-worthy buttons too!
Pin
Share
Tweet
Pocket
Share

Psst..! Did You See The News?

Every single week we are now sending a HANDPICKED LIST of amazing FREEBIES, blog posts, people to follow, books to read, and other useful online resources that will help you IMPROVE YOUR SKILLS. Start building your invincible brand today!

You have Successfully Subscribed!