Last Updated on

Websites have come a long way from their predecessors. Their goal is no longer to be the mere source of information but to gain user’s attention. This is where Call to Action buttons such as ‘Buy Now,’ ‘Free Download,’ ‘Sign Up Now’ act as hooks to gain customer’s attention on a website. As the name suggests they urge the visitor to do something.

Sadly many web designers ignore the ‘Call To Action’ button while developing a website. They consider it just another element in a webpage.  On the contrary this button often decides the success or failure of a website and thus requires attention to detail. Here we shall talk about a few ideas which make these buttons more clickable and improve the marketability of the website.

Good versus the Bad

First up you need to differentiate a good ‘Call to Action’ button from a bad one. One of the first parameters to judge this how well it blends with your overall design, the button shouldn’t appear to have been forcefully imposed on the design. Secondly and this is the most important parameter to distinguish between a good and a bad button – the button shouldn’t distract the user from the other texts and visual elements in the website. Thirdly the text element used over the button needs to be attractive and self-explanatory. There shouldn’t be a situation where the buttons need to be accompanied by captions as this kills the idea of creating such buttons in the first place.

Tips To Make the ‘Call to Action’ Button Attractive

Size – It goes without saying that the size of an element with respect to the size of other elements matters. The larger the size of the ‘Call to Action’ button and more chances it has of grabbing the user’s attention. Thus you need to make sure that this button is large. If you have multiple ‘Call to Action’ buttons in a web page you can vary their size according to their importance. For example a ‘Sign Up’ button is more important than a ‘Read More’ button and thus you can play with their sizes based on your needs.

Color – One of the best ways to differentiate your ‘Call to Action’ button from other elements in the website is by choosing a contrasting color for your button. Choose a color which is highly contrasting with respect to its surroundings and background. Using bright shades also help grabbing a user’s attention. The text and the button should also be in contract to make it more legible to the viewers.

Shapes – Most ‘Call to Action’ buttons are rectangular in shape, however you can always be a bit more creative with these buttons and try out new shapes which attract viewers attention. In fact some websites have increased their conversion rate breaking the convention and opting for shapes such as star, oval, triangles etc.

Text – The text content or the wordings that are used on ‘Call to Action’ buttons can also have a great effect on conversion rate. The language used should be ‘to-the-point’ and explain the visitor the exact purpose they are meant for such as ‘Buy Now’, ‘Subscribe Here’, ‘Create Account’, ‘Take a Tour’ etc. Make use of simple fonts which can easily be read from a distance as this will help up the conversion rate.

Mouse Rollover – Motion always attracts the human eye and using a mouse rollover on a ‘Call to Action’ button is a must. Here the mouse pointer would automatically change whenever the mouse is placed over the button. Even if the shape, size and color of the button fail to grab the attention of the user the mouse rollover would attract the attention of the visitor with the slight animation effect.

Position – The ‘Call to Action’ button should be placed prominently on the webpage which helps it attracting  the attention of the visitor immediately. One of the effective ways to do so is to place the button above the fold on the webpage which makes it visible as soon as the page renders. You can also try putting in somewhere in the middle of the page to ensure maximum attention.

Visual Effects – You need to make sure that the button stands out when compare to rest of the page and this can easily be done by giving some 3D effects to the button with common effects such as Drop Shadow, Gloss, Gradient etc. which can be incorporated into the button using applications such as Adobe Photoshop or Illustrator.

All these factors are major contributors to the success of a ‘Call to Action’ button in a website. Thus you should stress creating visually attractive buttons while designing your website. Alternately you can also create these buttons online as there are many websites which let you create these buttons online in no time.


Task Management App


Call to action by Shane McCleery


Dentist Gallery Button by Hamza Siddiqui


Builder DoubleButton by Jan Losert

Invite button (PSD freebie) by David Samuel

Confirm Order by The Purple Bunny P

Check Mark by Rareview

Dark Buttons by Julia Khusainova

Coach Double Button by Bill S Kenney

Record voice by Coen van Hasselt

Call to action by Jon Aizlewood

Rejected Start Button by Joey Lomanto

Checkmarket Buttons by Gijs Rogé

Yeah, do it! by Dennis Covent

Tagline (new design) by Sebastiano Guerriero

Round Red Button by Chris Brauckmuller

Button by Dimitri Okunev

Krazy Download Button by Richard Tabor

Follow me by Dany Duchaine

I'm Ready by Matthew Sanders

Google Play Button by Sebastiaan de With

Get Report! by Oykun

Button Bundle by Christopher Sybico

Download / Like V2 by Niklas Mathiesen


part of app landing page by Frantisek Kusovsky

Check out our previous articles!

We hope you enjoyed this article! Please don’t forget to subscribe to our RSS-feed or follow Inspirationfeed on TwitterGoogle+, and Facebook! If you enjoyed the following article we humbly ask you to comment, and help us spread the word!

Posted by Mark Wilston

Mark Wilston is a Content Writer and marketing professional working with PixelCrayons, a reputed Custom web design & development company India offering offshore cms, ecommerce and mobile apps development services. For more information about PixelCrayons, visit at

Leave a reply

Your email address will not be published. Required fields are marked *