Trends and Examples Showing the Art of Call-to-Action Buttons
As a web designer, your job is to catch the small details most people wouldn’t notice. You have to think of the most miniscule element on the page and how it would best be implemented for a task. The call-to-action button is a good example of this fact. It might seem like a small matter to most, but you know how crucial it is to the overall site, whether it is a contact, donation or purchasing button.
You, as the designer, have to find the balance between a button that stands out and one that draws attention away from the rest of the page. You need to know what words to use, what colors to apply, and what shape work. It has to be stark, clear, and prominent, but also go with the motif of the website you are designing. Making a mistake in these areas can actually put off a visitor clicking it, even if he or she doesn’t understand why the aversion suddenly arises.
To see this principle in practice, check out the 15 buttons below. Not only are they impressive visually but they are persuasive and great examples of the way call-to-action buttons can be created to actually convince someone to click.
The entire WordPress plug-in site uses red and orange tones, but in a gentle and blended way that isn’t too overpowering. So, when WordPress designed its button, it took advantage of that fact and used a bright orange that might have otherwise been too bold with a different background.
However, WordPress also used a soft-looking font to bring it all together. Notice the almost bubblelike look of the lettering, which keeps it from looking harsh. Instead, it is inviting and effective.
The Skype website has a very relaxed feel. Part of this is the blue, which is a rather smooth and attractive color that makes you feel laid back and easy. The button keeps with the mild tone, using an olive green rather than something too bright. The white lettering works well against it and reminds me a little of clouds, which mixes with the blue of the rest of the page.
The logo on the side is a nice touch, as it keeps the button from being too boring. Skype managed to avert that risk by giving something else for the eye to focus on, rendering the mild colors especially effective without being bland.
A lot of sites put their call-to-action buttons somewhere off to the side or at the bottoms of other text and images. But Picsengine puts it right in a place of prominence, drawing the eye before anything else does. Somehow, even using a black-and-white color scheme, Picsengine manages to make it more visually interesting than the colors in the background or the large text above it.
Placement is an important tool of design, and Picsengine has shown that masterfully.
Firefox created a button all its own, literally. No other website has used the format it has in creating a call to action, and that is considered a great thing by some, a bad one by others. There is an argument that it doesn’t look like a button but instead a graphic, and so is confusing.
I disagree. I think that Firefox made a groundbreaking design that is memorable, easy to spot and interesting to view. It also puts everything you need to know right there, without the user having to seek explanations elsewhere.
The problem with large and unusually shaped buttons is that they can often look garish and strange, throwing off the overall design of a page. But the CakePHP button got around that by using the same mild color scheme of the website and placing it to the side of the page. It all integrates beautifully.
The white used in the arrow, as well as the border, highlights it against the peach background, which is a nice touch.
Crazyegg went bold with its button. Not only is it smack dab in the middle of the page but it is a bright orange with an odd color text that you don’t usually see.
To make it even more noticeable, Crazyegg gave plenty of white space surrounding it and then used a light gray for the rest of the page’s text. It is hard to ignore it.
Not many call-to-action buttons use rounded shapes in their design. This one does and uses it well. It melds with the empty space around it while still being clear because of the orange color it uses.
The placement was a little sloppy, as using such a mild button might have been better placed somewhere prominent rather than to the side. But it still manages to get the point across.
“Start Stumbling” is a great little catchphrase. This button shows that you can use the language, rather than the look of the button itself, to really attract people. However, StumbleUpon does still make it interesting with the elongated shape, the color and the empty space around it.
The blue on this site is more bold and less relaxing than the one that is used on Skype. But Remember the Milk uses it to its advantage, keeping the button on the same color scheme and making it stand out with the white text practically ordering the user to “Sign Up Now!” It is extremely persuasive and effective and stands out from the rest of the page, which is fairly busy.
The overlay design of this button is really interesting. Notice how it is actually on top of the rest of the page, so much that it has even created a shadow behind it to give it more depth. It sticks out so much this way that you even notice it before you notice the rest of the page.
The unique arrow shape also adds to the green color, and the subtle “FREE” there on the side forced the eye to focus a little more than if it were missing.
When you use more than one call-to-action button on one page, it can be tricky to make them all stand out instead of one more than the others. It is even harder to make the main buttons stand out in a way that is more prominent than the less important ones, without making them fade into the background.
PlanHQ has used open space to great effect here and then made three different designs with different colors to accentuate each button. However, the Sign Up button stands out slightly more that the Tour button, and the Tour button stands out slightly more than the Watch the Video button.
If you have more than one call-to-action button but they are both equally important, you can do what Things has done and make them similar but different. These two buttons both have the same shape, size and colors. But one shows a download arrow while the other a shopping cart.
Both are very clear in function, and both are prominent and easy to see. That way, you are not more drawn to one than the other.
If Livestream used another color, this button might have been easy to miss because of the size and placement in the far corner. But the bright red manages to easily catch the eye and keep you focused on the call to action. It is even more prominent because of the empty space around it and the black and white of the rest of the site.
A call-to-action button is a crucial element to a successful site. The function of it is going to be unique, but none is more important than another. You have to take the time and effort to design one that will really accentuate the page and draw the user’s eye and attention the moment he or she arrives.
Using proper color, shape, size, placement and wording will ultimately decide the effectiveness of your button. Remember that you want one that properly integrates with the overall theme, but stands out and apart from it. However you choose to do that is up to you.