MAY 2, 2016 BY VAL GEISLER
What are your brand colors? I’m sure you know them off the top of your head (maybe even have those hex codes memorized, right?) but do you know what kind of feelings they evoke?
When I bought my first house back in 2007, every single room needed to be painted before we moved in. Well, they didn’t need to be painted, I suppose, if I wanted a baby pink dining room and a dark purple (including the ceiling) guest room. But I didn’t want that so off I went to buy rollers, paint trays, and several gallons of paint.
Along my drop cloth covered path, I did a little research into the colors I was choosing for each room. Red for my dining room was ideal – that color “stimulates the appetite and is often used in restaurants and is an excellent choice for dining rooms in the home”, according to Sherwin-Williams. Perfect. Those same paint pros also told me that green has a “calming effect” so that one went in the home office.
When it comes to brand design, many people take a similar approach. There’s the “what’s your favorite color?” set – those who choose brand colors based on their wardrobe or home interiors, and there’s the “what colors do my ideal customers love?” set – those who tap into their ideal customer even if it’s outside of their normal comfort zone.
colors of buttons
Naturally, after toiling over your brand colors and finally(!!!) making a choice, you want to slap those bad boys everywhere you can. Website, office supplies, Twitter homepage, phone case. You name it and it gets branded.
But when it comes to the buttons on your website and inside your emails, do your brand colors matter as much as you think they do? Are your customers just as likely to click on a button that is your brand color versus an alternate color?
In this post, I’m sharing 18 examples of buttons that encourage clicks so that you can compare, contrast, and get the most out of your own buttons. You’ll find real-world examples of companies that are doing buttons well— and some who might be missing a beat.
Of course, a click of a button is only the first step in your journey with your readers before they become customers. But with a little care, some focused testing, and a few tips from those who have come before you, your buttons could become the best buttons on the virtual block. Some of these buttons are for free items (like PDF downloads or deeper information on a sales page). Others are more transactional and your click equals putting money down for a product. No matter the type, if you treat your buttons as “just another thing to brand”, you might be missing an opportunity to truly connect and convert.
kissmetrics color chart
Blue
A color that we’re fond of here at ConvertKit, blue is an easy color to find on websites and software. For good reason, too. Blue stands for trustworthiness, loyalty and sincerity. It’s seen as an intellectual color that also has associations with communication, logic and coolness. (hey, thanks, blue!)
Crazy Egg
If you’re going to install a software onto your own site, you want that built in trustworthiness, right? Crazy Egg makes use of the color blue with their call to action button and even outlines the box where you put your URL before clicking that button in the same color. Since blue isn’t one of their brand colors, it stands out from the green around it on the rest of the page. By having a light blue background, Crazy Egg ties the color into the graphic and shows you that the sky is the limit when it comes to their heatmaps.
crazy egg blue button
Laura Belgray
Laura uses ConvertKit to handle her email marketing for Talking Shrimp, her brand dedicated to content and copywriting. Instead of using her pink and orange brand colors splashed all over her emails, Laura keeps her call to action button simple with our standard ConvertKit blue and, like a good little copywriter, she focuses on the words within the email.
laura belgray convertkit standard
Yellow
Yellow might remind you too much of that famous PayPal “Buy Now” button but it’s effectiveness there is for good reason. According to Unbounce, yellow is seen as a youthful, optimistic color that grabs attention. It’s also associated with emotions, self esteem, creativity and friendliness.
Moz
Rand Fishkin and the fine folks at Moz know a thing or two about online visibility and their homepage button is no exception. Not only are blue and yellow complimentary colors (one cool and one warm), the yellow button really stands out in a dark header. It’s a bit of light in the dark and it invites you in to see more before ever scrolling down the page.
moz yellow button
LeadPages
Using yellow buttons inside emails works for LeadPages too. Another example of partnering this bold color with our friendly pal Blue, LeadPages gives exact instructions on the button copy and helps it stand out in an otherwise jam packed email.
leadpages email yellow button
Brian Tracy
See that tiny bit of yellow in Brian Tracy’s logo? Brian’s actually able to incorporate his brand color here by choosing a yellow button for his goal-setting guide on his homepage. This time yellow is partnered up with red – another hot color – to entice action out of the reader.
brian tracy yellow
Red
Red, the color of my dining room back in my first home, is a very physical color which quickens the heart rate and promotes urgency. It stands for energy, courage, strength, excitement and defiance. Warmth is also a key association. When used in small doses, red can really pack a punch.
StitchFix
Taking a more understated look with the rest of their branding, StitchFix is all about the clothes and the focus on their site is clear. A red button in the center of the header invites the reader to take action with their service and start down the path to getting their fix every month.
stitchfix red button
Acuity Scheduling
In 2014, Acuity Scheduling worked with Joanna Wiebe’s team to optimize their website, including their buttons. By changing the button color (shown below), Acuity saw a 94% lift on clicks of that single button. “We made that one outside of the brand color, so different from the palette, and that was the point with making it really stand out,” Joanna said on The Lede Podcast. You decide – does the red button stand out to you?
acuity red button
Kyla Roma
Another happy ConvertKit customer, Kyla decided to swap out her button color inside her incentive emails to match her branding. With simple text and a clear call to action, the red button ties back into the website the reader just visited and also inspires a sense of urgency.
Want to learn how to change your own incentive email button colors? Click here to learn all about customizing your incentive emails with ConvertKit.
kyla roma red button
Green
The color of money, green seems like an obvious choice for banking and financial websites. After all, as Josh Pigford reminds us, this is often seen as the color of wealth. It’s a relaxing color which is the easiest one for the eyes to process. It promotes balance, health, refreshment and restoration, and is often associated with the environment.
Xero
As an accounting software, money is the center of the Xero world. And this brand makes the most of the relaxing color by pairing it with the word “free” in their button text. They’ve also chosen an image that ties in the blue of their logo and the green of the button, helping the eye move along the page to that ever-important button to click (Clever, Xero. We see what you did there.)
xero green button
Copyhackers
Using a popup in the middle of a blog post is a common known tactic (love ’em or hate ’em, popups convert). But common tactics are only successful if they’re done well and Copyhackers is making the most of theirs with this color combo one-two punch of Trusty Blue and Refreshing Green.
copyhackers green button
Orange
Long known as a popular color for buttons, brands tend to shy away from this exciting color lately. But orange deserves a second look: it’s an aggressive color that creates a call to action. It is associated with fun, warmth, passion and security. Hmmmm – maybe we should consider using some orange buttons…
Mint
Mint is about money, yes, but their mission is more than just dollars and cents. It’s about getting closer to your goals through better money management. It’s about freeing up your time and mind space so you can make the most of your days. And it helps that the color they chose for their buttons is associated with security and fun. After all, if Mint is out to do anything it’s to make you feel secure while making managing your money a bit more fun.
mint orange button
Social Media Examiner
One of the industry’s leading authorities on all things social, Social Media Examiner takes a strong approach with their call to action in orange. Their brand color of green (a cool color) sits opposite the warm color of orange making them ideal to support each other on their website – like this call to action for their industry report.
social media examiner orange button
Pink
“Pretty in pink” has never been truer than online. Pink is generally seen as a romantic, feminine color. It stands for love, warmth, nurture, tranquility and sexuality and it’s used in many women-focused brands across industries. Pink can be a power play when used well and it reinforces a warm and loving message for the right brands.
Gala Darling
Dedicated to living a life full of self love, Gala Darling speaks to the feminine mystique and her audience revels in all of the pink girlyness of her site. Even her invite in her popup is to “get love letters in your inbox” so a pink button is a natural choice here.
gala darling pink button
A Little Creative
Enveloping those big-hearted entrepreneurs in a massive hug, Morgan at A Little Creative uses pink as a standout color on her more neutral background. In conjunction with yellow (remember – that warm/cool color combo works everywhere), this site draws your eyes and your clicks right down to that bright pink button.
a little creative pink button
Purple
Historically known as a color of royalty, purple is a soothing color that has a spiritual element. It is associated with luxury, vision, quality and truth. Purple is also a rarely used color online, especially for call to action buttons, so why not stand out?
9to5 Chic
This brand happens to have purple in their brand colors, but 9to5 Chic makes the most of purple in an understated way. Highlighted against the otherwise mostly grey tone homepage, their purple buttons really stand out and keep you engaged with their site.
9to5 Chic purple button
Wellness Mama
Sitting almost exactly opposite of one another on the color wheel, green and purple go naturally together for Wellness Mama. Not only that, but the purple color really stands out in this mostly green homepage and encourages the reader to take action right away.
wellness mama purple button
Black
It’s hard to find a black button, and rightfully so. While black is a powerful color that exudes sleekness, sophistication and efficiency, it also has a tendency to blend in with the rest of the copy on a webpage. Shops like Sephora and luxury retailers such as Apple make the most of black in a meaningful way, but most bloggers, especially those who aren’t experienced with button testing, are best advised to steer clear of black for their calls to action.
Ghost
Okay, “ghost” isn’t a color, obviously but it’s a button type worth examining. While having a standout button color can pay off, many sites are opting for these more understated ghost buttons (translucent backgrounds that pickup the rest of the site) and seeing big returns from them.
A word to the wise: much like black, ghost buttons should be used by the experienced brand builder and tested against color buttons to know what works best with your audience.
Stripe
Sure, Stripe is using a blue button to encourage you to explore more about them, but their Sign Up button is a ghost button right next to the blue one.
stripe ghost button
Wedding Wire
With many options on one page, Wedding Wire makes use of ghost buttons to segment their audience into next steps on their site. Knowing that their audience is highly interested in powerful imagery, Wedding Wire makes the most of that by continuing to show the image behind their ghost buttons.
wedding wire ghost buttons
And now it’s your turn. What color will you use for your buttons? Are you more willing to test out some options now that you’ve seen the power of each color in action? Tell us in the comments below if you see buttons in a different light now and what you’ll do with your newfound knowledge.
No comments:
Post a Comment