What are the buttons for on your website? - Concept C, Agence Web

What are the buttons for on your website?

Why are there so many buttons everywhere? In our cars, on our appliances, on our shirts, on our faces and now even on our websites! Well, if you miss a big, shiny red button, don’t you want to press it? It’s instinctive, almost visceral. It is a universal language which indicates that there will be a reaction as a result of the interaction. This is called a call to action (CTA). When people come to your site, they’re not chatting with an employee, a product, or any other person. They interact with technology and the clearest way for the site to respond is with clear and engaging links.

This is where the buttons or calls to action come in. Attractive, colorful, relevant and responsive, they are your user’s navigation guides. People go to a site to DO something. They will look for information there, of course, but always with the aim of possibly accomplishing something (making an appointment, making a donation, buying something or finding out about upcoming activities). And if they weren’t intending to buy something, it’s the buttons’ job to sway them to a purchase or a service call from your website.


1. Clarity

First, the shape has to be clearly made to be clicked: darker or lighter than the rest, well placed and of a contrasting shape.

The words chosen should be action-oriented, short and simple. If the person can’t imagine exactly what’s going to happen, they won’t click the button. No Bernard Pivot vocabulary here!


2. Placement

Second, website buttons need to be strategic. You want to create some rhythm on your site by putting buttons in places where you think your audience will want to take action or learn more. You don’t want to overdo it, you don’t want to acne your site. But a lack of a button can also hurt you if when your user tries to take action, they have to return to the top of the page. It is very frustrating.

There are quick action buttons (found at the top of your page for people familiar with your interface) and guide buttons (which allow people, as they navigate, to interact with the different parts of your site).

You don’t want to put a quick action button in the middle of your home page. For example, “Donate” halfway down the page.

3. Responsiveness.

Third, you want to give your user an instant reward by letting them know that they took an action that caused a reaction. A change in color, opacity, size or outline tells the person that their action has been noticed and that something is going to happen. It is part of the user experience (UX) and is essential for customer satisfaction in a digital context.



Why is it important for an entrepreneur to understand the relevance of buttons? Isn’t it the web agency‘s job to place them? Touched … but often web writing is left to the company. Who better to define the mission and the values ​​that she wants to put forward in her site? However, very often, the writing puts aside the relevance of the buttons in the reading.

Every important block of text should lead to an action (button) and the writing of these should be elaborate in that sense.

We even have a writing guide that can help you make your web writing approach a reality!

Button types



Add to cart / Buy now / Proceed to checkout / Continue transaction

What people expect: access to purchasing information, products, access to invoice and mailing information.


Download / Update / Open / Print

People’s anticipation: the download box opens, allowing you to view the files and place the document as needed.



Try now / One month free / Subscribe / Subscribe / Subscribe to newsletter

What people anticipate: redirect to a personal information entry form. Be repetitive and specific throughout the subscription steps.


Read more / More info / Find out more / + / Discover

Users expect: access to a related page (Who am I, Mission, FAQ). They have to ask themselves a question and you have to give them the answer. It is a button to receive more information. People don’t like it when that button that’s supposed to answer their question is actually a hidden contact button. If so, be specific about the destination. Example: Want to know more? “Contact us!”



Continue / Next / Previous

What people expect: In a form, for example, they expect to take the next logical step or to confirm information. On the last page to complete, be clear: Finish / Conclude / Confirm


Share / Like / Follow / Facebook / Instagram

What people are anticipating: redirection to the social network or to sharing options.



Contact / Write to me / Make an appointment

Users anticipate: redirection to a text box and contact information, contact details, etc.

bouton_cta_EN_Plan de travail 1

Main button (CTA)


FAB (floating action button)


Ghost button


Text button


Switch button


Icon button

In conclusion, buttons are one of the most important aspects of the user interface (UI) and serve to direct the movements and interactions of the user. It is sometimes difficult for people to pinpoint the importance of these since most of our daily interactions with buttons are subliminal. But do you know what that means? These buttons work. If you don’t have to think about it and respond to the button instinctively without slowing your gait, it’s clear, functional and ergonomic. This is what differentiates an online store that runs at full speed from one where baskets fill up, but sales don’t complement each other.

With the lifestyle we lead these days, people literally don’t have 3 seconds to waste figuring out where to go and what to do.

!! Click the button, we know you want it … !! 😉

Author avatar