In order for your Call-to-Actions to work successfully, you must first determine how they’ll fit into the overall scheme of your site. By laying the groundwork, or information architecture, you’ll begin to discover how the buttons work within the web interface. To survive in the market, you have to generate revenue. So, the successful website is that which leads the reader of web page to the desired end result (“Buy Now”…”Learn More”). Now the question arises, how can we make effective call to action buttons which work in the real world.

Factors to Consider

Size

In web design, historically the larger the element, the more important it is. The size of your call-to-action in relation to its surrounding elements is essential in converting users to take action. After all, it’ll be hard to get the intended action from your user if your button is miniscule in size and blends in with the rest of the text.

• Use white space: A lot of what can be achieved from increasing the size of a button can also be accomplished by simply placing the button around plenty of white space. A button surrounded by white space will be much more prominent than one which is lost in a sea of text and graphics.
• The more white space there is in between a call to action button and a surrounding element, the less connected they are. Therefore, if you have other elements that can help convince users to take action, reduce the white space in between those elements and the call to action.

ScrapBlog
You can see the effects of using a prominent color, sufficient white space, and size relative to surrounding elements to attract users’ attention. Straightforward language conveys a sense of easiness, claiming that you can “start” right away by taking action.

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 made its mark in the industry.

Color

To ensure the user notices your button, it’s also important to consider its color. Although there are a few choice colors for a call-to-action button, it can be worthwhile to choose a contrasting color than the background. This essentially makes the button jump toward you, enticing you to click it.

• It has sometimes been said that a red button (and red text links) performs the best
• Perform some A/B testing to see what colors performs best for your website
• The performance of any button may be attributed to the contrast on the page instead of its color

Vuze.com visitors will have no problem finding the download call to action button. The use of contrasting color, plenty of white space, and placement on both the top and bottom of the page make this call to action noticeable and effective.

Placement

An effective button should be clearly visible on a page, and at least relatively prominent in relation to other elements.

• On a landing page – and indeed for most pages, where this is feasible – a button should appear above the fold. The likelihood that a button will be clicked is greatly diminished if a visitor has to scroll to see it.

• Increase the likelihood of a button being clicked by placing both at the top of the page (or above the fold) and at the bottom of a longer page. It’s likely a user may not scroll back up the page if they’ve passed it, or scroll down a page if they already see one.

• Proximity to other page elements is important as well. Obviously for an e-commerce site an “add to cart” button that’s right next to a product should perform better than one that’s further removed.

• In other situations, it is important to keep a call-to-action button close to such things as value propositions, testimonials and feature lists that are intended to stimulate conversions.

You can see these concepts in practice on the website for YourWebJob.com. By putting the call to action “Post a Job!” in a very prominent area, it is more likely that the user will notice it or remember it later, after they have looked at the site’s content.

Mobile Web Design
This call to action button is placed in a prominent location; it has large size and a distinctive color with respect to surrounding elements.

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.

Making Its Use Known

Of course none of these procedures matter if the button doesn’t actually look like a button! You need to make it clear to the visitors that this graphic is in fact a button that can be clicked on to result in a specific action and not simply another element on the page. Graphically speaking there are a number of ways to do this, including:

• Embossing the button
• Placing the call-to-action text in a discreet bordered area
• Offsetting the button from other graphical elements
• Making it behave like a button when the user’s mouse hovers over it
• For buttons that are not hyperlinked (and so do not automatically generate a hand symbol in the mouse over state) this can readily be accomplished with CSS.
• A change in the button’s appearance itself on mouse over, such as a change in color, is a further signal to the visitor that the button is clickable.

Kalculator
This call to action tells users exactly what to expect: by clicking on this call to action, they should anticipate shelling out $3.99. Using the word “only” hints that this is quite a good deal, which can help make the sale.

Postbox adds value through the download call to action by adding that its “FREE” 30-day trial and reduces consumer doubt with the purchase call to action by stating it’s a “No Risk Guarantee!” More often than not web sites calls to action simply ask the visitor to Buy Now! without reinforcing the value or ease of the action.

SEO

A button, in many cases, is directly linked to a page indexed by search engines. Adding an <img> alt attribute will provide the search engines with text they will associate with the target page:  if you are targeting keywords on that target place, you should employ them in your <img> alt.

To get the most out of your button, your image’s alt attribute (or, depending on the browser, an <a> title attribute) may be displayed to a visitor when they mouse over the button, providing yet another opportunity to reinforce or your call-to-action (“start your trial today!”).

Additional Resources

5 Tips for Creating An Effective Call To Action Button

How to Create a Slick and Clean Button in Photoshop

10 Techniques For An Effective ‘Call to Action’

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 :)

However enjoy and come back, I will release follow up article in next few days with many more free template resources for especially for web designers to make your job easier and better!

1. WEB UI Treasure Chest v 1.0 by ArtDesigner.lv

This is really one huge treasure chest with more than 100 elements in it!!! Outstanding and creator is from Latvia, same country I am from!

2. Free Interface PSD-Files by chaosLT

Amazing quality – great for learning purposes, psd files for free!

3. dA UI Button Pack 1 by Proxone

4. 150 Badges by stunthacker

5. Free Layout No3 by ZeroniX-Designs

6. One Fancy Icon by nonlin3

7. Website Navigation Menu by MericG

8. iPhone Gradation Set by woopsdez

Could come handy, great colors and free psd file with coloring.

9. Glass Navigation by hapikacsa

10. Glossy Apple Badges by MacTyler

11. Glowing Web Buttons by Mac002

12. Web Buttons by ahmadhania

13. Art PSD by MericG

This would be a really good way to showcase your latest works or designs, beautiful stock!

14. Realistic IES Lighting Effect by shimapa

15. Speech box by Fowz

16. Folders by Autoanswer

17. GreenLightOrb, GUI.S Resource by VidarWestfelt

18. Firstsession sample by woopsdez

19. WebDesigner Mini Kit by LazyCrazy

Just great, I always wanted that cursor buttons, which are useful to show active buttons, show place you’re pointing at and more. Extremely useful for every web and graphic designer.

20. Glowing Styles by Nanie-nyo

21. Win7 Library Icon Template 1.2 by Teri928

22. Stylish 3D Buttons by ahmadhania

23. Download button by SG3000

24. Navigation for web by Bartas1503

25. Vista Themed Template by soflyfx

26. Text Template – BOLD by arnoldisawesome

Template to help new users understand layer styles, effects used to achieve such good looking text.

27. Designer Portal v.1 + PSD by berkayuygun

28. SETUP ICON PSD FILE by LeMarquis

29. iKons Pack PSD by InfinityK4fx

30. Shouts PWN stamps by mindfuckx

31. Windows 7 Taskbar .psd by Carlos-Way

32. etiquette PSD by TLMedia

33. My Orbs by opelman

34. nApple PSD Resource by nonlin3

Good looking psd Apple template, great for testing and analyzing effects.

35. Classic 2 Templates by Kshegzyaj

36. Abode Pickleshop by leca

37. Free Template Number 2 by yiolo

38. Folder Menu Tabs by GraphicIdentity

39. Free menu PSD for you by grafxdesign

Here you’ll find some of the best websites that offer various free icon set collections as well as just separate good collections in other sites, so browse through the sites and download the icon sets for free.

1) Icons Etc

You can find more than 104,297 icons in this site. So you are sure to find the right icon set that you are looking for. You can download the free icon sets and clipart stock images as whole or browse through the icon set and download a single icon that you need. All the icons present in this site are of high quality and there are some 3D icon sets available for download as well.

2) FreeIconsWeb

FreeIconWeb offers hundreds of icon sets for free download. It hosts various kinds of icon sets from basic icons to 3D icons. Icon sets are present in different formats like .PNG and GIF. This website enables you to preview the icon set prior to download. You can also submit your icons on this site.

3) FreeIcons Download

Browse through number of icon sets and download the one you like. You can browse through the icon sets by categories for easy finding. There are icons for every need like computer icons, food, animals, people, etc.

4) Iconarchive

If you are looking for art icons, then this is the place where you have to look for. Find icons for windows, Mac and Linux computers in Iconarchive. Web designers can also find the icons they are looking for easily.

5) Icon Stick

Icon Stick hosts number of vibrant icon sets that you can download for free. You can find various kinds of icons in different formats like PNG, GIF, vector and pixel icons. You can download icons for Windows, MAC and Linux operating system.

6) abb soft

Abb soft is very rich in icon set collections. All the icon sets are arranged in categories for easy finding. It sports icon manager that makes you even easy to find the icon set that you are looking for.

7) Icon factory

This is one another icon rich site where you can download icon sets for Windows, Linux and Mac system. You can also find desktop pictures to download for widescreen, full screen and wallpaper sizes.

8 ) Dry icons

It has got some excellent icon set collections you can download in .IOC or .PNG or .ICNS format. All the icons present in this site are of high quality such that you can insert them into the web site without any corrections or resizing.

9) bestfreeicons.com

This site holds more than 20,000 free high quality icons and many more are been added every day. Browse through the different categories to find the icon set you need and download it for free use.

10) Deviant ART

This site hosts a variety of icon sets which are shared by users. You can find icons for various needs and it also hosts avatars to download.

11) Icon Dock

It has got many free and stock icon sets which are compiled from various sites, such that you can download all of them from one place.

12) Elite by Design

This web site adds new icon sets every day so that you can find new icon sets daily. In this site you can view and download high quality icon sets for free.

13) Smashing Magazine

This website offers 35 cool icon sets to include in your web design project or for use on your computer. You can see icons of animals to latest gadgets to choose from for free download.

14) SpeckyBoy

In this post the author has included some 96 free icon sets. These icon sets will be useful for the web designers, developers and bloggers. Most of the icon sets are of high quality and are available in various formats.

15) Comment.net

If you are looking for free bright icons, then you must have a look at this site. Here you can find about 40 free icon sets that are bright and milky with high quality icons.

16) Hongkiat.com

This site contains some of the cool icon sets for WordPress and other applications. You can download most of the icons for free which are of high resolution and quality. This site is especially useful for the web designers and developers.

17) Nigraphic

Here you can find free icon sets for websites and applications. Icon sets from other websites are also included to help you find the most useful resources possible.

18) Iconpot

Hundreds of different icon sets are present in this site with credits to the name and link of author of each icon set.

19) Iconbuffet

It features many icon sets and you can download them for free in this site. It also features stock icons, standard icons, blog and vector iocns for free. You can also preview the icon sets before you download.

20) Graphic Push

This site has a good collection of blog icons, XML and RSS, file, folder and application management icon packs. They are available for free download and use, very useful for web designers.

21 Naldz Graphics

This blog post contains links to 44 awesome icon sets ranging from browser icons to iPhone icon sets. You can also find latest icon sets like transformers, etc., which look cool on any of the gaming sites.

22) Spheres Graphics

In this site you can find icon set in 4 different colors and you can download it in different formats and sizes. For windows 48 x 48 and 128 x 128 icon set is available and for Mac 128 x 128 icon sets are available.

23) Ganato designThis website is for freelance web designers and developers. In this site you can find different styles for a single icon type so that you can choose to select the best out of all. There are about 24 icon sets are present and all of them are PSD icons.

24) FAMFAMFAM

It has got four icon sets which are very useful to anyone. In this site you can find flags icon set which has many country’s flags. The icon sets are available in GIF and PNG formats.

25) Graphic Design

In this site the developer has aggregated a list of cool icon sets in one place. Such that you can download or have a quick preview of the icon sets directly. You can find icon sets for use in social bookmarking and networking most of the icon sets are useful for the web developers and designers.

26) Directory for designers

In this site you can find 50 icon sets for social media and also to use on your blog. Most of the icons are of high quality and you can also find some free hand drawing icon sets in this site.

27) Six Revisions

About 40 icon sets are present in this site which you can use for many ways. In total there are more than 3000 individual icons in this article.

28) Tutsaz

A large collection of free and commercial icon sets in one place. You can find icon sets like functional, milky, silk, blogging, etc., icon sets in this site.

29) Function

This web sites adds information about new icon sets frequently. In this site you can see the work of freelance designers and can find icon sets to include in your work or applications. You can also find icon sets for social media, bookmarking and sharing.

30) Instant Shift

Cool icon set collections are submitted by the users in this site such that you can download these icon sets for free. There are many free vector icon sets are present in various colors, designs and formats to download in this site.

31) We Love Icons

The icon sets present in this site are free for personal use. You can dowload the icon set in the format you want either for Windows, Mac or in png format. It also features icon converter such that you can upload a file or image to generate icons.

32) Pro Blog Design

In this site there is the coolest collection of some of the best free icon sets on the web. There are different kinds of icon sets like the social bookmarking to vector resources. You can easily download the icon sets directly from this site.

33) Back to essentials

Here in this site you can find 120 free icon sets to download. There are different forms of icons you can find icons for MS office to many cartoon character icons. The collection is really cool with thousands of icons you are sure to find one for you.

34) Ntt.cc

There are more than 400 icon sets in this site ranging from simple web application icons to iPhone icon sets.

35) OpenSourceHunter

This site hosts an article with the list of great free social icons. You can have a instant preview of the icon set and download them directly from this site.

36) Pingable

It host some 20 free and royalty free icon sets. You can see icons of daily gadgets like iPods and other items in this site.

37) Noupe

You will find 50 free icon sets in this site. You can find icons for celebrations, social bookmarking and for other purpose in this site.

38) Traffikd

There are 10 social bookmarking icon sets in this article which are of high quality.

39) Novus Volce

The author of this article has given the information of icon lists that are hosted on various sites on the net. By clicking on any of the link you can have access to many icon sets at once.

40) dhtml site

In this site there are 22 essential and free icon sets like Silk icons, mini icons, drunkey icon set, etc., to choose from. Most of the icons are useful for the web designers.

41) Web Design Ledger

There are total of 21 best and free icon sets in this article which can be used for web designing projects or in the blogs. All the 21 icon sets are unique among them and there are icon sets like the ASP .Net icons, Tango Icon Library, etc., such that you can find an icon set for every project.

42) Semlabs

In this site the developer has designed and published some 310 icons in the form of one icon set. This icon set can be proving to be the life line of the web designers when they do not find the required icon anywhere else. The icons are present in 16 x 16 size and in PNG format and are free to use in any project.

43) Web Design Dev

This is one of the popular online journals for the web designers. In this site they have included an article that is containing some cool icon sets for free. You can find social bookmarking icon sets, RSS icon sets, flavors icon set, etc., in this site.

44) Blog Perfume

If you are looking for some of the glossy blogging icon set then you must have a look at this site. It has got only one icon set but the designers have done full justification for their work. Every icon looks like a master peace and there are available in 3 sizes 24 x 24, 36x 36 and 48 x 48 in the PNG format.

45) Icon Joy

In this site the developer had included brighter and lighter versions of the icon sets such that the user can choose which icon set to use according to the shade of the background. There is only one icon set is available for free download and use where as you can buy others at low price.

46) Tha Slayer

With in-depth knowledge of web design and latest industry standards the author of this article has included the most useful and high quality icon sets that are useful for the web designers and bloggers. The icon sets are available in different sizes and formats.

47) Best Design Options

This is a blog site that is completely dedicated to help web designers. In this site there is a blog post which contains 18 very useful icon sets for the web designers and bloggers alike. There are icon sets in 3 different sized and are available in various formats.

48) Superb Hosting

In this site there are links to the popular icon set hosting sites so you can browse through all the sites and find the best one to include in your project.

49) CSS Reflex

50) IconFinder *updated
Search through 106,839 icons or browse 167 icon sets. Beautiful website with really huge collections of free icons, in my opinion first place to look for big research.

The author of this article has included the most awesome social bookmark icon sets to download. As most of the people are using social networking sites and the social networking sites are the good means to spread the word across the internet. There are different sizes and formats of icons in this post you can also find some hand crafted icons sets and other graphically designed icon sets in this article.

About the author

Guest blogger Srikanth writes on Tech Inspiration blog about tips, gadgets, and technology. You can also check out his blog or Linkedin Profile for more information.