Web Design Wednesday – Where to Place and How to Make Call to Action Buttons

Articles March 13, 2013

Call to action (CTA) buttons are considered as vital elements in creating a website. These buttons allow your website to be easily navigated, as call to action buttons are designed to standout on the overall design of your website.

For most ecommerce websites, CTA buttons are considered as the source of leads and possible customers. These buttons are always tracked and watched for, as fluctuations in visits and/or of income may come from a CTA button’s design and prominence in your website’s design.

So, how do we create and where do we place Call to Action Buttons in our website’s design? We’ll try to answer to this question in this post


How do we create Call to Action Buttons?


CTA Button Size vs. Other Website Elements

Call to action buttons are ideally designed to stand out against the overall theme of a web design. This includes sizing – CTA buttons are designed to be slightly bigger than the rest of other buttons. Ideally, other buttons in a website, such as social media buttons, are created with the same size, so that CTA buttons are easily identified by users.



Color Contrasting

Using a color that’s opposite to the website’s theme is another effective technique to differentiate the CTA button from the rest of the page’s other navigational buttons. You can use the color wheel as a reference – colors that are opposite one another in the wheel are contrasting colors.



Tell Users What to Expect and What You Offer

Always include short phrases that inform the user what will happen, or what where they’ll go to once they’ve clicked the CTA button. This will provide a clearer purpose and navigation for the user.



Where do we place Call to Action Buttons?


Top of the Page

The best area to place a CTA button on a webpage is at the top, so that users will automatically see the button before they explore other functions/pages of your website. Buttons at the top of the page will also make it easier for users that intend to buy or inquire to reach their purpose in visiting your web page.



Center of the Layout

Placing the CTA button in the center of your layout lets users know immediately what you offer and what you want them to do. You can utilize white space and a clever write-up to make your CTA button stand out in your website.



Call to Action buttons are designed for specific actions or purposes that you have in mind for them. You can use CTA buttons to trigger or start the navigation of your website, draw a user’s attention to a special offer, or to persuade your users to purchase from your online shop.


What’s the best designed website have you seen so far (except social media sites)? Tell us about it through our comment section down below!

Follow us on FacebookTwitterPinterest and Google+ also do subscribe to get your latest dose of design news, tutorials and creative ideas. Need a template for a print project you’re working on? We’ve got them all — from poster to postcard, to business cards and brochures! Checkout our Free Blank Templates!


Follow us on Facebook, Twitter, Google+, and Pinterest to keep yourself updated with the hottest art inspiration, graphic design tips, and resources. Lastly, our RSS feed is open for subscriptions!
Share This Post

Cadence is You The Designer's senior blogger, and the most jack-of-all-trades of the staff. She's always trying out something different every day, some of which fuels her posts here on the blog. Let her know if you want us to post more about your favorite topic - she might know more than a thing or two about it!

Powered by Shutterstock
  • Sneha P Singh

    nice post…….

  • http://streetsmash.com/ Marie

    These are insightful tips on how to make call to action buttons effective. Thanks for the ideas.