Attract Your Visitors With Call-to-Action Buttons : Best Examples

Posted in Inspiration • Posted on 14 Comments

Have you experienced passing by into a shop and noticed a poster that says “70-80% off Discount on All Items,” then went inside to try their discount? Or saw a food commercial on the television of the new product of your favorite fast food chain, and then felt like you want to try it and then actually called their delivery hotline?

Like the poster and the TV commercial, that’s what call-to-action buttons’ purpose are, they attract every visitor that pass by on your site for them to be your prospective customers that will buy the products on your site, sign up as a member, or try your product for free.

To make your call-to-action buttons effective, you need to decide carefully with its color, wordings, language, size, font and where to place it on the website. Here are some tips to help attract your customers to click your button.

1. Use Effective Words and Language

Your choices of words and language you use on the label of your buttons have a huge impact with your visitors. I suggest that you use action words and terms that are already familiar to most such as Download, Buy, and Try it now. It should be attractive to hear that it captivates the attention of the visitors to click it.

Remember, it should be short, direct and simple, so that they already know what they can get when they clicked it. You may have at least one word or four words at most for the label. With the language, since English is the most commonly today, it would be good to use English words but it still depends on what the language is used on the website generally.

Putting urgency also helps visitors to immediately call an action to your button. Try to take a look at this:

PDFTiger

What PDFTiger did is it placed a timer on when the promo will end. Putting time duration of promos is a good way on enticing your visitors to already buy the product. Another way of putting urgency is offering freebies as soon as they purchase the product.

2. Choose the Best Font, Size and Color

With the choice of font size, it would be good if you use Sans Serif typefaces such as Arial, Helvetica or Tahoma. They are easy to read on the screen.

Take a look at this screenshot:

CakePHP

Though the size of the Download button is large, it still looks professional. That’s what a good call-to-action button should be.

Ideally, a call-to-action button should be large in size but if you may want it smaller, you can have it in a contrasting color on the background of your website like this:

Yahoo!

The Download button you see on this screenshot is smaller compared with the Download button of the previous one but it can still be recognized easily by visitors for the color is contrasted with the background. Remember, the color should be prominent enough to attract your visitors that it contrasts the background of the website. I also recommend that you put a hover color change effect on your buttons.

3. Think of the right position

The positioning of buttons is also one thing you need to consider to have an effective call-to-action buttons.

Refer to this screenshot:

Twitter

On the website Twitter, the Sign Up button’s size is not that large but you can notice it as early as the website loads. Not only does the creator use contrasting color but also the button was placed in a good position. Notice that above the button is a text that briefly explains what visitors can get when they sign up.

Another good example is the Mozilla Firefox website:

Many developers have the connotation of just putting call-to-action buttons on the homepage of the website, remember that it should not only be limited on the homepage, rather try putting some call-to-action buttons on every page of the website.

Flickr

Like the website, Flickr, even when you click any links on the left panel side of the page the Create your free account button is always visible. Another thing, find a position on the part of the website where your button should not be overcrowded by other texts, images or buttons.

Inspiration: Great Call-To-Action Button Examples

I want to share with you some websites with good call-to-action buttons to give you more ideas if you will be doing your own. Go and take a look.

You may click on the image to go to the website.

PicsEngine

In the screenshot below, you can see that it has two call-to-action buttons: the Video Tour button and the Sign up button. On the website of picsengine, the Sign up button was more emphasized by making it color green on which it contrasts with the background of the website. In this case, they are giving the visitor either to take a peak of the website or to sign up already.

LifeTreeCreative

In this website, lifetreecreative emphasized the call-to-action button by making it large in size, even larger than the logo. The color and positioning also made it visible than with any other elements of the site.

Xero

Another good example would be the website of Xero. Not only it chose good colors, but they also put the button under a text that lures each visitor and are curious about the product. So the next thing they are going to do is to click that alluring button.

Donor Tools

Same as Xero, Donor Tools used texts that can attract visitors, especially the text, “it takes about 20 seconds”. This gives the visitor a notion that the process won’t take too long. Also, I suggest that you position your button in a place where there are texts that can entice your visitors with its purpose but not that it gets over board.

Medifire

Look at what Mediafire did good strategies with their buttons. When the site loads, the first thing your eyes will see is the Upload to MediaFire button.

And when you scroll down, you will still see buttons with good colors, shapes, position and captivating texts around them.

Google?

Yes. Google always stands out, of course their buttons too. That’s maybe one of the reasons why it’s the most used search engine.

Sprouter

How about this one? Sprouter used light and refreshing colors that may attract visitors and also that big call to action button. Putting the word, “Free” is also a good strategy used here to get visitors’ attention to sign up.

Magento

Magento used drop down on their buttons that gives users other options. In my opinion, if the colors of the buttons are different with the motif of the template, which is orange, I think they will be more noticeable.

Atebits

There are a lot of things that caught my attention with atebits. One is the logo and two is their cute but informative blue call-to-action buttons. Using light colors gives captivating effects to users, and also when you add brief information on what will they get when those buttons are clicked.

VoltRank

If you want to have an easy way to dominate Google rankings, try VoltRank. Though it used dull color for the background, by choosing Red as the color of the button makes you electrified to create an account. If the button is larger than its current size, more visitors can be attracted by it.

ANZ

I think it is better if the call-to-action buttons of ANZ website, an online banking system, have it in different color such as Green or Orange to make them more obvious.

APPTEMPLATES

Have AppTemplates as one good example in putting appealing statements. This can be a great strategy to have effective call-to-action buttons.

Senzoo

Senzo, a fan funding platform has a simple web template that made their buttons and other elements catchy.

1Password

Have you forgotten your password? Try 1Password. Because of the texts above the two buttons, this website makes one of those with good call-to-action buttons. I like the concept of putting blue outline on the Buy it now! button. Exclamation mark (!) also helps in enticing visitors.

Remember the milk

This site highlights the Sign Up Now! button by positioning it in the middle of the page that is surrounded by informative texts to the users.


Transmissions

Transmissions gives two actions to the user: the primary and secondary action. Take a look at this screenshot, the primary action here is for the visitor to buy the product, Logbook. While the secondary action is to download the software for trial purposes.

TasteBook

This is a good site if you are looking for a stunning and unique gift for your love ones. As good as how they make use of big fonts, eye-catching image and large in size on their call-to-actions buttons. It would be better if the button has a hover effect though.

Storenvy

Take a look at what creative Storenvy created their website. In this example, the developer used a round one for the call-to-action button, Join Now. It was emphasized by the white outline surrounding it, the small icons and informative texts.

WUFOO

Wufoo, an online form builder is a good example when it comes to positioning. Buttons are positioned in a good space where there are not much contents cluttered. Good choice of colors make those buttons also very effective.

Rocket Cart

Take a look at this screenshot I got from Rocket Cart’s website. The choice of color is good and how they position their buttons. But the way I look at it, making those buttons larger and also the font size will be better in appearance and attraction.

CodeCanyon

Having contrasting colors for the background and buttons with nice hover effect makes codecanyon a good example.

Coding Robots

What I like about CODING ROBOTS buttons is the Free Download button was given emphasis than with the Buy Now button. It gives the notion to each visitor that you can try it first before purchasing the product. See screenshot below.

Snap

On this website, SNAP may use other colors for their buttons to make them more noticeable as soon the page loads.

BaseCamp

The arrow pointing on the button is very helpful in letting visitors notice the See Plans and Pricing button. Moreover, the time-frame estimated in signing up grants the user a fast-based process. I hope you, too, can manage to create successful call-to-action buttons like what Basecamp have.

BandThemer

This button bandthemer site has is a good example on how can you inform visitors on what information they can expect to see upon clicking the button.

InstantLoop

Aside from the cute logo, I find InstantLoop choice of color and call-to-action button really good. The

LiveResto

This site is a good example on how images are used to draw attention to the button. In this screenshot, the chef image is pointing his finger on the button. What a cool strategy isn’t? To add up on to that, it has also a text that informs the user the product is for free and they can use it for 30 days.

Traffik

Another example here is the website Traffik, a content management system. The use of contrasting colors on your button and label is also a nice strategy. Like in this example, the button is Black, but because of the Yellow font color of the label, it still stands out.

Positive Impressions

In my point of view, Positive Impressions should put some improvements on their buttons to better stress out those and attract visitors’ attention. On the good side, buttons are put in good positions that is below the information of each.

Mobile cubix

Putting a round outline on the read more button then leading it on the application really got my attention. What a cool strategy.

Summary

To sum these things up, just remember:

  • One to four words is enough for the label, make it direct and simple.
  • If possible, make the button large and will still look professional.
  • Use color for the button that is alternative on the website’s background.
  • You can use alluring texts, as long as it does not gets cluttered with the button.
  • Position the button in a space that it will stand out from the rest of the website’s elements.

Call-to-action buttons are not just buttons. Attracting customers and gathering clicks from these means more profits for you. So, you better create those buttons very well.

I hope this article helps you a lot :)

33 Written Articles

An Information Technology graduate who loves learning new things and chocolates, too. She spends the whole day sitting in front of the computer, making herself updated with the things going on around her.

14 Comments Best Comments First
  • Ahmad

    Monday, October 25th, 2010 21:12

    1

    i love the buttons used in themeforest all

    0
  • Cody

    Tuesday, October 26th, 2010 09:42

    6

    awesome post! thanks a lot for sharing :)

    0
  • Dan

    Tuesday, October 26th, 2010 02:42

    5

    All the buttons in the world will not get me to purchase something unless i am ready to do so. This is true with any shopper.

    0
  • Enursa

    Tuesday, October 26th, 2010 01:58

    4

    I like “Donor Tools”. It give me inspiration to install my demo bar.

    Thanks Charina

    0
  • John Davis

    Monday, October 25th, 2010 22:21

    2

    I love these buttons and i will use them in my new project.All these buttons look cute and nice

    0
  • Hunter

    Monday, October 25th, 2010 21:19

    3

    I never realized how much buttons draw you in.

    0
  • Stijn

    Tuesday, October 26th, 2010 11:50

    7

    Interesting idea, as mentionned above, I didn’t realize the “power” of the call-to-action buttons…

    0
  • Rahul

    Tuesday, October 26th, 2010 12:05

    8

    really interesting , following all these tips will absolutely help , i would say : attractive stuff are the best way to get and make people click , clicking is all what we need . different languages is needed most of the times too ! very good tools to be used !!!!

    0
  • petra jordan

    Friday, November 25th, 2011 23:21

    13

    awesome post! thanks a lot for sharing

    0
  • Anna Howard

    Monday, December 12th, 2011 15:10

    14

    For sure call to action statements can help you with getting traffic and visitors to your website but what i think can even help you in diverting yet more traffic is going to using these call to action statements on networks of social media’s.

    0
  • Templ

    Tuesday, July 5th, 2011 08:53

    12

    Hmmm, I’m just trying to reinvent the wheel and see why these calls to action work might work well. I think there are 2 things:
    – design and use of colors are really good,
    – HUGE call to action button, which is obvious when you think about it, it has to be seen,
    – all the button tell the visitor in plain words what the visitor should do next.

    What do you think?

    0
  • Andrea Carter

    Friday, February 18th, 2011 05:36

    11

    Great site here. Some like yours cover subjects that cant be present in print. I dont understand how we got on 15 years ago with just magazines and newspapers.

    0
  • Krutika

    Tuesday, October 26th, 2010 19:09

    9

    I like the the way of highlighting the buttons. Its very catchy. I Will try to incorporate in the layout.

    0
  • Brett Widmann

    Friday, January 21st, 2011 19:19

    10

    I really like these different button examples. I am excited to design my own versions.

    0
  • Anna Howard

    Monday, December 12th, 2011 15:10

    14

    For sure call to action statements can help you with getting traffic and visitors to your website but what i think can even help you in diverting yet more traffic is going to using these call to action statements on networks of social media’s.

    0
  • petra jordan

    Friday, November 25th, 2011 23:21

    13

    awesome post! thanks a lot for sharing

    0
  • Templ

    Tuesday, July 5th, 2011 08:53

    12

    Hmmm, I’m just trying to reinvent the wheel and see why these calls to action work might work well. I think there are 2 things:
    – design and use of colors are really good,
    – HUGE call to action button, which is obvious when you think about it, it has to be seen,
    – all the button tell the visitor in plain words what the visitor should do next.

    What do you think?

    0
  • Andrea Carter

    Friday, February 18th, 2011 05:36

    11

    Great site here. Some like yours cover subjects that cant be present in print. I dont understand how we got on 15 years ago with just magazines and newspapers.

    0
  • Brett Widmann

    Friday, January 21st, 2011 19:19

    10

    I really like these different button examples. I am excited to design my own versions.

    0
  • Krutika

    Tuesday, October 26th, 2010 19:09

    9

    I like the the way of highlighting the buttons. Its very catchy. I Will try to incorporate in the layout.

    0
  • Rahul

    Tuesday, October 26th, 2010 12:05

    8

    really interesting , following all these tips will absolutely help , i would say : attractive stuff are the best way to get and make people click , clicking is all what we need . different languages is needed most of the times too ! very good tools to be used !!!!

    0
  • Stijn

    Tuesday, October 26th, 2010 11:50

    7

    Interesting idea, as mentionned above, I didn’t realize the “power” of the call-to-action buttons…

    0
  • Cody

    Tuesday, October 26th, 2010 09:42

    6

    awesome post! thanks a lot for sharing :)

    0
  • Dan

    Tuesday, October 26th, 2010 02:42

    5

    All the buttons in the world will not get me to purchase something unless i am ready to do so. This is true with any shopper.

    0
  • Enursa

    Tuesday, October 26th, 2010 01:58

    4

    I like “Donor Tools”. It give me inspiration to install my demo bar.

    Thanks Charina

    0
  • Hunter

    Monday, October 25th, 2010 21:19

    3

    I never realized how much buttons draw you in.

    0
  • John Davis

    Monday, October 25th, 2010 22:21

    2

    I love these buttons and i will use them in my new project.All these buttons look cute and nice

    0
  • Ahmad

    Monday, October 25th, 2010 21:12

    1

    i love the buttons used in themeforest all

    0

Comments are closed.

54.227.89.236 - unknown - unknown - US