50 Effective and Creative Call to Action Buttons

واضح آرشیو وب فارسی:پی سی سیتی: 50 Effective and Creative Call to Action Buttons

************************************************************ **********************
************************************************************ ***********************8 (*********************************************************** *****/ck.php?zoneid=8) ************************************************************ ***********************9 (*********************************************************** *****/ck.php?zoneid=9) ************************************************************ ***********************10 (*********************************************************** *****/ck.php?zoneid=10)
“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 (http://liveresto.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons10.jpg (http://liveresto.com/)

Storenvy (http://www.storenvy.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons5.jpg (http://www.storenvy.com/)

InstantLoop (http://www.instantloop.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons9.jpg (http://www.instantloop.com/)

Donor Tools (http://www.donortools.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons1.jpg (http://www.donortools.com/)

WUFOO (http://wufoo.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons11.jpg (http://wufoo.com/)

Mobile cubix (http://www.mobilecubix.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons12.jpg (http://www.mobilecubix.com/)

Crazyegg (http://www.crazyegg.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons16.jpg (http://www.crazyegg.com/)

Ncover (http://www.ncover.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons22.jpg (http://www.ncover.com/)

280 Slides (http://280slides.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons27.jpg (http://280slides.com/)

OH! Media (http://www.ohmedia.ca/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons37.jpg (http://www.ohmedia.ca/)

13 Creative (http://www.13creative.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons39.jpg (http://www.13creative.com/)

Commercial IQ (http://www.commercialiq.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons40.jpg (http://www.commercialiq.com/)

Atebits (http://www.atebits.com/tweetie-mac/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons2.jpg (http://www.atebits.com/tweetie-mac/)

Remember the milk (http://www.rememberthemilk.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons3.jpg (http://www.rememberthemilk.com/)

Transmissions (http://transmissionapps.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons4.jpg (http://transmissionapps.com/)

Coding Robots (http://www.codingrobots.com/blogjet/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons6.jpg (http://www.codingrobots.com/blogjet/)

BaseCamp (http://basecamphq.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons7.jpg (http://basecamphq.com/)

BandThemer (http://www.bandthemer.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons8.jpg (http://www.bandthemer.com/)

Dailymile (http://www.dailymile.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons13.jpg (http://www.dailymile.com/)

Mozilla Firefox (http://www.mozilla.com/en-US/firefox/new/)
“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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons14.jpg (http://www.mozilla.com/en-US/firefox/new/)

CakePHP (http://cakephp.org/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons15.jpg (http://cakephp.org/)

Litmus (http://litmusapp.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons17.jpg (http://litmusapp.com/)

Carsonified (http://carsonified.com/)
A unique approach to design an out of the ordinary call to action button that appeals to the design community.

http://media.smashingmagazine.com/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons18.jpg (http://carsonified.com/)

planHQ (http://www.planhq.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons19.jpg (http://www.planhq.com/)

Things (http://www.culturedcode.com/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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons20.jpg (http://www.culturedcode.com/things/)

Livestream (http://www.livestream.com/platform/livetvbroadcasts)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons21.jpg (http://www.livestream.com/platform/livetvbroadcasts)

Dashboard (http://www.getdashboard.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons23.jpg (http://www.getdashboard.com/)

Kalculator (http://koombea.com/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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons24.jpg (http://koombea.com/kalculator)

Spotify (http://www.spotify.com/en/)
A moderately sized and grey colored call to action button against vivdly colored web background really stands out!

http://media.smashingmagazine.com/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons25.jpg (http://www.spotify.com/en/)

Dropbox (https://www.dropbox.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons26.jpg (https://www.dropbox.com/)

MailChimp (http://www.mailchimp.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons28.jpg (http://www.mailchimp.com/)

Campaign Monitor (http://www.campaignmonitor.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons29.jpg (http://www.campaignmonitor.com/)

Fileshare HQ (http://www.filesharehq.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons30.jpg (http://www.filesharehq.com/)

Traffik CMS (http://www.playintraffik.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons31.jpg (http://www.playintraffik.com/)

Mobile Web Design (http://mobilewebbook.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons32.jpg (http://mobilewebbook.com/)

Tao Effect – Espionage (http://www.taoeffect.com/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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons33.jpg (http://www.taoeffect.com/espionage/)

Ekklesia 360 (http://www.ekklesia360.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons34.jpg (http://www.ekklesia360.com/)

Spinen (http://www.spinen.com/)
“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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons35.jpg (http://www.spinen.com/)

Codebase (http://www.codebasehq.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons36.jpg (http://www.codebasehq.com/)

Wake Interactive (http://www.wakeinteractive.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons38.jpg (http://www.wakeinteractive.com/)

Icon Dock (http://icondock.com/)
A simply designed white colored “Browse Icon Library” button against a vividly colored background really stands out.

http://media.smashingmagazine.com/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons41.jpg (http://icondock.com/)

TasteBook (http://www.tastebook.com/home/product_info)
Here the call to action button uses an interesting icon and bold text to grab readers’ attention.

http://media.smashingmagazine.com/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons42.jpg (http://www.tastebook.com/home/product_info)

Elegant Themes (http://www.elegantthemes.com/gallery/onthego/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons43.jpg (http://www.elegantthemes.com/gallery/onthego/)

Sprouter (http://sprouter.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons44.jpg (http://sprouter.com/)

APPTEMPLATES (http://www.appstemplates.com/)
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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons45.jpg (http://www.appstemplates.com/)

Additional Resources and Articles

How to Create a Slick and Clean Button in Photoshop (http://sixrevisions.com/tutorials/photoshop-tutorials/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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons50.jpg (http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/)

Inspirational Buttons in web design – Pattern Tap (http://patterntap.com/tap/collection/buttons)
This Pattern Tap collection provides you some inspiration on good button designs.

http://media.smashingmagazine.com/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons51.jpg (http://patterntap.com/tap/collection/buttons)

10 techniques for an effective ‘call to action’ (http://boagworld.com/design/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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons52.jpg (http://boagworld.com/design/10-techniques-for-an-effective-call-to-action)

Good Call-To-Action Buttons (http://www.uxbooth.com/blog/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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons53.jpg (http://www.uxbooth.com/blog/good-call-to-action-buttons/)

Call to Action Buttons: Examples and Best Practices (http://www.smashingmagazine.com/2009/10/13/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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons54.jpg (http://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/)

5 Tips For Creating An Effective Call To Action Button (http://blogs.sitepoint.com/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/cdn_noupe/wp-content/uploads/2011/04/calltoactionbuttons56.jpg (http://blogs.sitepoint.com/5-tips-for-creating-an-effective-call-to-action-button/#)

(rb)
http://feeds.feedburner.com/~ff/Noupe?i=zgmEUThGMA8:g_ss6cOKpnc:V_sGLiPBpWU (http://feeds.feedburner.com/~ff/Noupe?a=zgmEUThGMA8:g_ss6cOKpnc:V_sGLiPBpWU) http://feeds.feedburner.com/~ff/Noupe?i=zgmEUThGMA8:g_ss6cOKpnc:F7zBnMyn0Lo (http://feeds.feedburner.com/~ff/Noupe?a=zgmEUThGMA8:g_ss6cOKpnc:F7zBnMyn0Lo) http://feeds.feedburner.com/~ff/Noupe?i=zgmEUThGMA8:g_ss6cOKpnc:gIN9vFwOqvQ (http://feeds.feedburner.com/~ff/Noupe?a=zgmEUThGMA8:g_ss6cOKpnc:gIN9vFwOqvQ) http://feeds.feedburner.com/~ff/Noupe?d=7Q72WNTAKBA (http://feeds.feedburner.com/~ff/Noupe?a=zgmEUThGMA8:g_ss6cOKpnc:7Q72WNTAKBA)

نکات طراحی صفحات وب
افکت های زیبا
تکنیک های طراحی صفحات اینترنتی
جدیدترین کد ها - منو های زیبای css

این صفحه را در گوگل محبوب کنید

[ارسال شده از: پی سی سیتی]

[مشاهده در: www.p30city.net]

[تعداد بازديد از اين مطلب: 489]