Should one use only one color, for example green, for call to action buttons across a website?
2 Answers
I'm going to assume that
- you that you are not referring to ALL call to action buttons and
- that you are not using the same color for all states.
Consistency is important. If you're using a green color then be consistent.
But keep in mind there are different types of CTAs and there may very well be a need to differentiate them. (In which case keeping a consistent color standard is even more important.)
There are at least two states for CTA - one the CTA is unavailable to the user; meaning that he needs to perform an action first. This is very common in forms.
If the user needs to select "A" or "B" before the system knows what to display then the CTA should be grayed out (or otherwise inform the user that this action cannot yet be taken). Once the user has done the required action then the CTA would change into its active state. (In your example: green).
Also keep in mind that green, while often associated with go, need not be used. I often use a shade of blue. In the current project I'm working on we're using 2E8DC3 for active and E4E4E4 for inactive. In case it matters :)
-
Hi..Thanks for taking the time to answer my question. I am using 449d44 for the buttons (for e.g. install an app/show me all the apps as the call-to-action). I haven't yet explored to keep these buttons inactive (like you said). Don't you think keeping the buttons inactive (for certain call-to-actions) actually leads to visitors not ending up clicking them. I mean if they see a prominent green CTA button, won't they be more inclined to click it rather than keeping it inactive. Sorry for being naive. I know one needs to test this but just exploring the idea. Commented Feb 24, 2018 at 6:31
-
@NishaChangrani - I don't think the color matters. Notice that this site uses a blue color. The purpose of inactive / active colors is to give visual clues. These clues may not be necessary. But do you really want users clicking a submit button and nothing happen? Or pop-ups saying "You must do 'x' in order to proceed."– MayoCommented Feb 27, 2018 at 16:23
Of course it will be easier for the user to quickly distinguish the CTA if they are all identical. There may be exceptions depending on the color of the background for example, as long as the CTA remains well identifiable by keeping same spacing, shape, shadow etc...