50 Effective and Creative Call to Action Buttons


[IMG]************************************************************ **********************[/IMG]
[IMG]************************************************************ ***********************8[/IMG] [IMG]************************************************************ ***********************9[/IMG] [IMG]************************************************************ ***********************10[/IMG]
“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.


</p> 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.

http://media.smashingmagazine.com/cd...nbuttons10.jpg

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.

http://media.smashingmagazine.com/cd...onbuttons5.jpg

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.

http://media.smashingmagazine.com/cd...onbuttons9.jpg

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.

http://media.smashingmagazine.com/cd...onbuttons1.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons11.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons12.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons16.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons22.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons27.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons37.jpg

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

http://media.smashingmagazine.com/cd...nbuttons39.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons40.jpg

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.

http://media.smashingmagazine.com/cd...onbuttons2.jpg

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.

http://media.smashingmagazine.com/cd...onbuttons3.jpg

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

http://media.smashingmagazine.com/cd...onbuttons4.jpg

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.

http://media.smashingmagazine.com/cd...onbuttons6.jpg

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.

http://media.smashingmagazine.com/cd...onbuttons7.jpg

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.

http://media.smashingmagazine.com/cd...onbuttons8.jpg

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

http://media.smashingmagazine.com/cd...nbuttons13.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons14.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons15.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons17.jpg

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

http://media.smashingmagazine.com/cd...nbuttons18.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons19.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons20.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons21.jpg

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

http://media.smashingmagazine.com/cd...nbuttons23.jpg

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

http://media.smashingmagazine.com/cd...nbuttons24.jpg

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

http://media.smashingmagazine.com/cd...nbuttons25.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons26.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons28.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons29.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons30.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons31.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons32.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons33.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons34.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons35.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons36.jpg

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

http://media.smashingmagazine.com/cd...nbuttons38.jpg

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

http://media.smashingmagazine.com/cd...nbuttons41.jpg

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

http://media.smashingmagazine.com/cd...nbuttons42.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons43.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons44.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons45.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons50.jpg

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

http://media.smashingmagazine.com/cd...nbuttons51.jpg

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

http://media.smashingmagazine.com/cd...nbuttons52.jpg

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

http://media.smashingmagazine.com/cd...nbuttons53.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons54.jpg

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.

http://media.smashingmagazine.com/cd...nbuttons56.jpg


(rb)
http://feeds.feedburner.com/~ff/Noup...nc:V_sGLiPBpWU http://feeds.feedburner.com/~ff/Noup...nc:F7zBnMyn0Lo http://feeds.feedburner.com/~ff/Noup...nc:gIN9vFwOqvQ http://feeds.feedburner.com/~ff/Noupe?d=7Q72WNTAKBA