50 Effective and Creative Call to Action Buttons

April 25th, 2011

“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

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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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


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.


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.


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.


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”.


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.


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.


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.


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


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.


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.


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.


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


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.


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.


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.


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


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


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


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.


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.


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.


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.


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.


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.


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.


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.


“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.


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.


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


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


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


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.


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.


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.


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.


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


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


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


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.


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.



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


35 comments for „50 Effective and Creative Call to Action Buttons
  1. mindxstudio on April 25th, 2011 at 12:46 pm

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

  2. inspirationfeed on April 25th, 2011 at 3:01 pm

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

  3. Jatin on April 25th, 2011 at 3:30 pm

    Nice list.

    My personal favorite is always Firefox, and will be.


  4. joe on April 25th, 2011 at 3:31 pm

    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 on April 25th, 2011 at 6:14 pm

      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 on April 26th, 2011 at 2:09 pm

        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.

  5. Mike on April 26th, 2011 at 2:03 am

    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.

  6. johns on April 26th, 2011 at 8:35 am

    What is so special about all these buttons?!

    • Greg on April 26th, 2011 at 3:26 pm

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

  7. aming on April 26th, 2011 at 8:35 am

    nice collection…
    bookmark this page with thanks………

  8. Angelo Michel on April 26th, 2011 at 10:09 am

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

  9. adishaswot on April 26th, 2011 at 11:09 am

    awesome collection!
    Thanks.. ! it was really helpful

  10. Ryan Leaper on April 26th, 2011 at 1:27 pm

    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.

  11. Sam Beckham on April 26th, 2011 at 2:33 pm

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

  12. Website Design on April 27th, 2011 at 7:58 pm

    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.


  13. ursonate on April 28th, 2011 at 4:03 am

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

  14. Tarun on April 28th, 2011 at 5:22 am

    These are great. Simple and effective.

  15. Ravikumar V. on April 28th, 2011 at 11:51 am

    cool collections

  16. Roberto Blake on May 2nd, 2011 at 6:11 pm

    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.

  17. Pablo González on May 10th, 2011 at 8:42 pm

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

  18. Joanna Ciolek on May 10th, 2011 at 10:14 pm

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

  19. Benjaminpirson on May 10th, 2011 at 11:48 pm

    Nice to see my liveresto design in first place! Thanks

  20. Kat on May 11th, 2011 at 10:28 am

    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.

  21. Judith on August 19th, 2011 at 4:43 am

    Great collection and some good ideas for clients. Thanks!

  22. AdreamCreation on December 9th, 2011 at 12:04 pm

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

  23. Will B on January 22nd, 2012 at 5:38 pm

    great list thank you. Will surely help.

  24. Sajan Mani on May 1st, 2012 at 12:06 pm


  25. Mary Marikash on May 8th, 2012 at 12:54 pm

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

  26. Justin on July 12th, 2012 at 11:10 am

    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.

  27. Julie on July 26th, 2012 at 4:30 am

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

    Thank you!

  28. Michael on August 4th, 2012 at 3:29 pm

    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:

    – Michael

  29. Kylie on September 7th, 2012 at 8:21 am

    Fantastic Collection! Thank you.

  30. Rjah Makis on September 16th, 2012 at 7:21 am

    Great collections of creatives. thanks for giving these out

  31. mark morris on September 28th, 2012 at 6:24 pm

    best collections of themes. ever. great mate

  32. lopez on October 10th, 2012 at 1:19 pm

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