Apr 25 2011

50 Effective and Creative Call to Action Buttons

Advertisement

“Call to Action” is a term commonly employed in the field of web design and user experience (UX). It refers those elements in a web page that plead for an action from the visitor. The most common demonstration of call to action in web pages appears in the form of clickable buttons. These clickable buttons perform predefined action when clicked.


Here is a roundup of more than 50 websites demonstrating effective call to action buttons that do their job quite smartly. We hope that this collection helps you getting some idea of unique and creative ways to make these calls to action in your own works.

Effective Call to Action Buttons

LiveResto
One of the best call to action buttons in this collection that uses a smart strategy to attract visitors’ attention by using images and text; and make a simple Try For Free button a powerful clickable call to action button.

Screenshot

Storenvy
A creatively designed round shape “Join Now” button that call visitors to join the website. The white outline surrounding the button puts emphasis on the action along with small icons and accompanying text.

Screenshot

InstantLoop
InstantLoop makes use of soothing color combinations along with their cute logo design. The call to action button clearly states what users can expect when they click the button.

Screenshot

Donor Tools
Smart use of a catchy line that says, “It takes about 20seconds” to give an idea that the process will not take too long. A clean and attractive “Get Started” call to action button.

Screenshot

WUFOO
Two simple but visually alluring call to action buttons placed right in the centre of the web page that make them very hard to miss. These buttons do not look blatant even when you look at the overall design.

Screenshot

Mobile cubix
Mobile cubix uses a round outline surrounding the “Read More” button and then leading it to the application that not only attracts visitors’ attention but also informs them what they can expect.

Screenshot

Crazyegg
Here the whole website is designed around the call to action button that proudly sits in the centre of the web page. The button is surrounded by sufficient white space that puts emphasis on the action to be called.

Screenshot

Ncover
Another great example of two call-to-action buttons on the homepage. The use of green color against the blue background stands out highlighting the more important action of the two to the user.

Screenshot

280 Slides
A really big call to action button making it impossible for the visitors to miss it. The button uses the same color as that of the background; making the over-sized button appear more pleasing to eyes and less obtrusive.

Screenshot

OH! Media
A large and beautifully colored call to action button that is placed in the centre of the webpage. Its positioning is making it stand out on the page and drawing attention directly to the call to action demanded.

Screenshot

13 Creative
An unconventional design that brings visitors’ attention to call to action button even though the surrounding elements are quite proportionally larger.

Screenshot

Commercial IQ
The large sized and prominently placed call to action button with an icon of a magnifying glass to add perspective to the purpose of the action. The text “Free to search” answers the question a user may have regarding any charges attached to the action.

Screenshot

Atebits
An eye catching website having loads of attention grabbing elements including logo and two smartly designed light color call to action buttons that come with brief description on what will happen when these buttons are clicked.

Screenshot

Remember the milk
The perfect example of an effective call to action button. This site focuses on the Sign Up Now button by positioning it in the center of the web page. The button is skillfully supported by the text to provide information.

Screenshot

Transmissions
Two centrally placed call to action buttons that entice visitors to either buy the product by clicking “Buy It” or download its free trail by clicking “Download Now”.

Screenshot

Coding Robots
The most interesting thing in these ‘call to action’ buttons is that Coding Robots highlights the Free Download button more than the Buy Now button which gives a subliminal message that visitors can try the free version first prior to buying the product.

Screenshot

BaseCamp
A neat and clean minimal web page accentuating the “See Plans and Pricing” button by pointing to it with an arrow. This lets visitors check out the pricing and plan details. Furthermore, the expected period of time in signing up gives the user a fast-based process.

Screenshot

BandThemer
BandThemer places a centrally attracted call to action button that directly leads the visitors to their pricing detail page so that they can make a buying decision.

Screenshot

Dailymile
A large centrally aligned call to action button that is hard to miss and attract visitors’ attention immediately. Simple and effective.

Screenshot

Mozilla Firefox
“Free Download” button of the Mozilla Firefox is a true revolution in terms of call-to-action graphics. Its large, unevenly shaped, vibrantly colored and detail oriented button has stirred a great deal of debate in the industry.

Screenshot

CakePHP
A large sized and irregularly shaped “Download” button has been created to attract a whole lot more visitors to download the program. The button suits the background of the website.

Screenshot

Litmus
A round shaped and beautifully colored call to action button that is surrounded by plenty of empty space. Although Litmus did not go overboard with its call-to-action button, it still lands on a decent looking button.

Screenshot

Carsonified
A unique approach to design an out of the ordinary call to action button that appeals to the design community.

Screenshot

planHQ
Two regularly sized and lightly colored call to action buttons that are surrounded by the blocks of white that accentuate them for the visitors’ attention.

Screenshot

Things
Again two different call to action buttons that discretely stand out well against the light blue and grey background. Both the buttons are identically shaped, sized and colored to keep their importance intact.

Screenshot

Livestream
A red colored “Livestream your Event” button significantly draws attention by standing out against the black background. Very smart usage of red color to attract potential customers. Furthermore, the button is placed in the top right corner that also urges users to click the button.

Screenshot

Dashboard
A brightly colored and relatively large in size call to action button that is loaded with information about the service being offered.

Screenshot

Kalculator
Koombea has elegantly used proper positioning, appropriate color, realistic size and conventional shape to make its call to action button shine.

Screenshot

Spotify
A moderately sized and grey colored call to action button against vivdly colored web background really stands out!

Screenshot

Dropbox
Very simple and self explanatory call to action buttons that perform their job quite tidily. Visitors will be under no misconception as to what they are supposed to do here. They can either watch the video by clicking “Watch a Video” or can download the product through the “Download Dropbox” button.

Screenshot

MailChimp
A large, red colored “Sign Up Free” button that is surrounded by plenty of free space to put emphasis on it. The proper positioning of this call to action button is making it stand out on the homepage.

Screenshot

Campaign Monitor
Campaign Monitor provides a set of neatly designed call to action buttons that present two potential user actions. Visitors can either go for the free trial or can check out its features first prior to downloading.

Screenshot

Fileshare HQ
A relatively large call to action button telling the visitors what they can expect when the button is clicked. Always a welcomed route.

Screenshot

Traffik CMS
A dark colored and large call to action button that is surrounded by the block of white color to highlight the button even more.

Screenshot

Mobile Web Design
Here, the call to action button is placed right in the top of the web page to immediately draw visitors’ attention. Apart from its prominent location, its large size and distinguishing color relating to surrounding elements really add more visual interest.

Screenshot

Tao Effect – Espionage
This website provides a set of three call to action buttons that provides users with three options: Download, Buy Now, or Upgrade. The color difference helps us distinguishing that the primary desired action here is to download the program which is followed by two similarly prioritized actions of Buy Now, or Upgrade.

Screenshot

Ekklesia 360
Icons are used to signify a sense of moving forward along with the high contrast color that has been used against the dark blue background.

Screenshot

Spinen
“Find Out More” button tells the users what to anticipate when they take action i.e. to find out more about the product when they click the button.

Screenshot

Codebase
Here a large call to action button tells users that they can try Codebase free of cost for 15 days. The use of high-contrast color and icon on the left is sufficient enough to draw the user’s attention.

Screenshot

Wake Interactive
The use of high-contrast color in this call to action button in relation to its adjacent elements makes it visually pop.

Screenshot

Icon Dock
A simply designed white colored “Browse Icon Library” button against a vividly colored background really stands out.

Screenshot

TasteBook
Here the call to action button uses an interesting icon and bold text to grab readers’ attention.

Screenshot

Elegant Themes
This set of call to action buttons demonstrate the power of correct use of color to stand out without conflicting with the adjacent design elements.

Screenshot

Sprouter
The use of light and refreshing colors for this big call to action button is sure to attract visitor’s attention. Using the word “Free” is a good option to inform visitors that there will be no charges for signing up.

Screenshot

APPTEMPLATES
This is a good example of putting appealing statements in the webpage to attract potential customers’ attention. This is what we call an effective call to action button.

Screenshot

Additional Resources and Articles

How to Create a Slick and Clean Button in Photoshop
A step by step guide on how to create large and noticeable call to action buttons using Photoshop.

Screenshot

Inspirational Buttons in web design – Pattern Tap
This Pattern Tap collection provides you some inspiration on good button designs.

Screenshot

10 techniques for an effective ‘call to action’
10 proven techniques by Paul Boag for designing call to action buttons that work.

Screenshot

Good Call-To-Action Buttons
UX Booth presents a perfect picture on what an effective call to action button is made up of.

Screenshot

Call to Action Buttons: Examples and Best Practices
A great collection by Jacob Gube to let you understand how can you create effective call to action buttons that actually entice your visitors to click them.

Screenshot

5 Tips For Creating An Effective Call To Action Button
Call to action buttons work best when you make it apparent that what you exactly want your users to do. Here are 5 useful tips that need to be kept in mind when designing a call to action button.

Screenshot

(rb)

About the Author

Aquil Akhter is a web graphic designer and has been working in this field for 8 years. He also runs the blog webdesigncore.com, which focuses on free web resources and inspiration for designers and developers.

Comments and Discussions
  • mindxstudio, 25 April 2011

    Very good collection of Call to Action Buttons, it is the one of main part of design, I am happy to check.

  • inspirationfeed, 25 April 2011

    These examples are very engaging, I really like Storenvy’s design and interaction it has on its visitors!

  • Jatin, 25 April 2011

    Nice list.

    My personal favorite is always Firefox, and will be.

    Thanks.

  • joe, 25 April 2011

    why 50? some are good, “effective and creative” but some just aren’t and look like the rest of the internet.

    try quality over quantity

    another point: at “Carsonified” you don’t even see it’s a button; how is that effective? just because they call themselves designers?

    • Robert Bowen, 25 April 2011

      Thanks for the feedback, Joe, though I would have to disagree with you. The post featured as many as it did, and those that it did for a reason…options. We wanted to demonstrate the variety of approaches (both simple & complex, both aesthetic and plain, both creative & effective).

      So the point of those which you classify as looking like the rest of the internet, is to demonstrate that you can effectively call your readers to action simply without any unnecessary bells and whistles.

      As for Carsonified, I think it is completely recognizable as a call to action, but that could be because I frequent the site. Naturally we each have our preferences, but I think that Aquil did a nice job giving us the full spectrum in the showcase of what the web has to offer as far solutions for the calls.

      • Designer, 26 April 2011

        I agree with Joe. Even the description is inaccurate. I consider myself a part of the design community, yet I thought the “CTA” was ineffective. It doesn’t stand out from the rest of the design.

        The same goes for

        Atebits — everything is scrunched up together and there’s thought bubbles pointing to everything screaming “Click Me!”

        Remember the milk – blue on blue just doesn’t cut it. If I were a client, I wouldn’t want the CTA to be blue, as it recedes to much and blends in with the background. The goal of the CTA is to stand out.

        CakePHP – same as Atebits, too much jumble on the page

        MailChimp – bad color combination, the orange vibrates too much against the cyan blue, even the typography is bad.

  • Mike, 26 April 2011

    This is not a great list of “creative” call to action buttons. They are effective, yes. But 90% of these are buttons that look like thousands of other sites and have been around for years. I also agree with the comment about quality over quantity.

  • johns, 26 April 2011

    What is so special about all these buttons?!

    • Greg, 26 April 2011

      Agree, seen this million times before. Most probably on Noupe too.

  • aming, 26 April 2011

    nice collection…
    bookmark this page with thanks………

  • Angelo Michel, 26 April 2011

    Please take your screenshots on something else then Windows next time :P The fonts in quite some screenies are way to pixelated.

  • adishaswot, 26 April 2011

    awesome collection!
    Thanks.. ! it was really helpful

  • Ryan Leaper, 26 April 2011

    It can be easy to overlook call to action buttons but they are one of the most important aspects of any website. Many people choose to have smooth edged buttons that use bright colours that stand out against the main colour of the site. You could argue that using call to action buttons with these design characteristics is therefore unoriginal but I think the reason this approach to call to action buttons is so popular is because it works. We recognise this type of button design as a call to action which makes it easier for users to interact with the site.

  • Sam Beckham, 26 April 2011

    A few good examples here, it’s important to remember to design a site around what is essentially the most important part.

  • Website Design, 27 April 2011

    Love this list. I’ve always had trouble with making buttons pop.

    I will definitely employ some of these design suggestions on my next projects.

    Thanks!

  • ursonate, 28 April 2011

    i know most of these buttons *look* effective, but are there stats to back that claim up?

  • Tarun, 28 April 2011

    These are great. Simple and effective.

  • Ravikumar V., 28 April 2011

    cool collections

  • Roberto Blake, 02 May 2011

    Call to action buttons are extremely important and have to be well designed, mostly because they are the “point of conversion”. Pushing this button is the first step a person takes toward buying. Its crucial that it be executed well.

  • Pablo González, 10 May 2011

    Thank You for your post. Great Collection. Dropbox is my favorite call to action botton. I will bookmark your list…Best

  • Joanna Ciolek, 10 May 2011

    These are really nice. I also like the variety in your collection – thanks!

  • Benjaminpirson, 10 May 2011

    Nice to see my liveresto design in first place! Thanks

  • Kat, 11 May 2011

    This is a good and comprehensive collection for reference but it would be useful to see the ‘effective’ part qualified with stats or anecdotal evidence of some sort: a CTA is only as good as the results it generates. I had the same thought about the Carsonified CTA as some of the commenters above, so I’d be interested to know in real terms how effective it has been in practice.

  • Judith, 19 August 2011

    Great collection and some good ideas for clients. Thanks!

  • AdreamCreation, 09 December 2011

    I really like the mail chimp buttons. You have a great collection of buttons here. Thanks for sharing

  • Will B, 22 January 2012

    great list thank you. Will surely help.

  • Sajan Mani, 01 May 2012

    Excellent!

  • Mary Marikash, 08 May 2012

    just wondering how to make one for my site. your Call to Action Buttons are very cool

  • Justin, 12 July 2012

    I think I’ve seen another article on this site with links to tutorials on how to make such buttons but I can’t find it. It would be very helpful to many of us if you could also include a link to that other article.

  • Julie, 26 July 2012

    I’m new to User Experience design and found your website very helpful for a project I’m currently working on.

    Thank you!

  • Michael, 04 August 2012

    Hi Aquil – nice collection of CTAs! I’ll definitely come back for inspiration in the future.

    I recently published a short how-wo video on writing CTA copy: High-impact Button Copy – How to write calls-to-action that convert. I go over a few case studies and introduce a very simple optimization principle that anyone can follow. Check it out here: goo.gl/GQ893

    - Michael

  • Kylie, 07 September 2012

    Fantastic Collection! Thank you.

  • Rjah Makis, 16 September 2012

    Great collections of creatives. thanks for giving these out

  • mark morris, 28 September 2012

    best collections of themes. ever. great mate

  • lopez, 10 October 2012

    great idea and best collections of themes. thanks for sharing these themes

search form
 
image description image description