Building the perfect website is hard. From the right color scheme, to choosing a font that engages audiences, to making sure that technical SEO elements are perfect, there are a lot of different things that require a great deal of thought and effort in order to get right. However, one element really stands above all the rest in importance for any website that is trying to get a user to do something – whether that is buy a product, request a quote on a service, or learn new things about the value a business might provide them. This essential website item is known as a call to action button, and it can be unbelievably difficult to get right.

From choosing the right shape, to its placement on your website, there are a variety of different elements to consider when trying to create the best call to action buttons for your website. With so many different factors to consider, it is easy to get overwhelmed and settle on a button quickly and without much thought – but beware! The right call to action button can mean the difference between hundreds or even thousands of conversions over the lifetime of a website. A great place to look when you’re feeling stuck on what to do is to check out some examples of websites that are doing their calls to action correctly. Here are 8 of our favorites:

1) Uber

All of the best call to action buttons feature copy that gets users to click and see what comes next in a website’s conversion funnel process. However, an equally important part of any good call to action button is whether or not it stands out from the rest of the website it is on. For most pages with ctas, contrast is extremely critical when it comes to making sure that the button actually converts.

There are few better examples of consistent contrast usage than Uber’s website. The homepage features three separate background images that scroll behind a CTA button that doesn’t change in color, shape, or positioning on the page in the middle left-hand side of the site. It provides three versions of copy for three very different demographics. What is so interesting about this call to action, outside of contrast, is that the three scrolling backgrounds are effectively going after each of their target audiences – in order. First they go after riders with a very simple “sign up” copy, and then drivers with the same message. Finally they provide information for people who are interested in what the business is doing for the community through a “learn more” call to action.

While the copy isn’t particularly earth shattering in it’s originality, it is clear, to the point, and draws the eye so strongly that most user’s initial interaction with the website is almost solely based around the CTA’s location on the page.

2) Flex Studios

Call to action buttons come in lots of shapes and sizes – but all of the best ones offer an emotional trigger while standing in stark contrast to the rest of the page they are featured on. While CTAs are important, sometimes the actual emotional trigger that a CTA uses to be effective isn’t in the button – it’s in the copy that surrounds it.

A great example of this idea in action can be found on Flex Studios’ website. Featuring scrolling background images, the page changes the text that accompanies each image while giving a consistent green CTA button with the copy “Book a Class”. What’s particularly interesting about this site is that each set of copy provides different emotional triggers that could feasibly interest someone enough to book a class. The initial copy focuses on highlighting Flex’s location in New York City’s Union Square, as their target customer is in that area. For the second image and batch of copy they focus on the three different workouts they offer in an effort to get users to see what different classes they could book by clicking on the call to action. Finally, they highlight their discount pricing for a first class.

In this way the page and its CTA are not addressing just one possible emotional trigger that could get a user to click on it – but three. In this way the page is able to capture a variety of different users with different needs, and this is what makes the call to action button on the page one of the best around.

3) Crazyegg

While a simple button for users to “click to learn more” or “purchase a product” can be extremely effective, some of the best call to action buttons are a lot more interactive and serve as a way to push people down the conversion funnel as opposed to acting as a final step before a purchase.

A great example of an interactive CTA leading to great results for a business is Crazyegg’s website. The homepage is extremely simple – it features the company’s logo and poses a very simple question that a lot of users want to know the answer to: “What’s making your visitors leave?” It then goes one step further and provides a solution by suggesting that audiences find out by entering their website and then click on an extremely alluring CTA – “Show Me My Heatmap”.

This call to action is so effective because it primes users by presenting and then offering a simple solution to a problem. By the time they end up on the next page, they really want an answer to the question Crazyegg posted on their homepage, and are much more likely to sign up for the service as a result. The whole process is a phenomenal example of emotional triggers combining with user interaction to get a business tons of conversions in the most efficient way possible.

4) medCPU

Sometimes the best call to action buttons are the most subtle. While this would seem to go against all logic, if your product is a sizable investment, sometimes it’s important to keep your call to action present, but secondary to providing audiences with information about why they need to purchase what you’re offering.

For B2B healthcare provider MedCPU, this was certainly the case. A technology solution for hospitals, their product is not something someone would buy on a whim – they need as much information as possible beforehand. As a result, the call to action button at the top of the page, “How It Works”, is a very soft call to action not in the vein of a “buy now!” or a “sign up”, because most users aren’t going to be at the step in the conversion process upon initial entry to the site – they need to learn more about the product first.

It’s only when users get to the bottom of the page and have read everything medCPU can do for their business that they are presented with a much stronger set of calls to action to “Contact Us” and “Request A Demo”. This site is a great example of an initial call to action that is subtle, but moves users along the conversion process in a non-intrusive way, teaming up with a much harder sales-centric call to action later on in the user’s journey through the website.

5) Litmus

We’ve already discussed how the content on the rest of the page can affect a call to action’s worth to a business – but lack of content can play a role as well. This is particularly true in above-the-fold calls to action on a website’s homepage, where text and image clutter can distract users from seeing (and clicking on) what would otherwise be a perfectly decent call to action button.

One of the best examples of spacing leading to a call to action button that converts is on email provider Litmus’ site. Their orange call to action button, which reads “Get started now”, would be pretty efficient on most sites – but with how they’ve structured their page it works even better. In particular, their use of an extremely high quality image of a desktop with their email testing suite open in the background, paired with their call to action is impressive. It provides imagery that answers the “why” of their CTA – mainly that their product suite looks great and provides result. There are two lines of text above the CTA that answer the “why” to really drive this idea home.

While this is all impressive and effective in terms of making sure the call to action button performs, what is important here is that a single background image, two lines of text, and standard navigation elements are all users have to contend with outside of content that users have to scroll down to see the rest of. This means that a CTA that is already prominent gets even more prominence on the page – driving more conversions as a result.

6) Spotify

When a website has two unique goals it can be difficult to choose which one to prominently display. We’re already gone through a couple examples of how scrolling background images can be used to solve this issue – but they clearly pose a problem in terms of click-through-rate as your calls to actions on the second and third scrolling images get less face time and less opportunities to drive clicks as a result. If your business is facing this problem, sometimes it’s a better idea to go with two calls to action side-by-side using different color schemes and font choices.

One of the best calls to action that demonstrates this concept in practice can be found on music streaming service Spotify. Spotify has two clear goals when it comes what they want to do with their online presence – drive as much usage of their platform as possible, while simultaneously trying to convince existing and new users that purchasing their premium package is a worthwhile investment. In order to make sure that both actions can be feasibly taken from their homepage they feature two call to action buttons side-by-side that are designed quite differently. Their “Go Premium” CTA features bold white text on a green background, while their “Play Free” button features black text transparently overlayed on their background image. It’s clear that the primary goal of the site is to drive premium sign-ups as a result of both style and positioning (buttons and clickable navigation elements to the left of a page tend to drive more clicks) of the buttons – but at the same time it’s very easy for users looking to listen for free to find what they’re looking for as well.

7) Unbounce

A lot of the highest-converting calls to action do a phenomenal job of incorporating testimonials on their pages without detracting from their button’s conversion rates. While this might seem relatively simple in practice, getting a testimonial on a page that actually provides value while not pulling user attention away from a call to action button is anything but child’s play. There’s a very fragile balance between allaying some user’s fears of buying your product or service while not negatively impacting those who would otherwise convert with you without a second thought.

A great example of a website that does this perfectly is Unbounce, a landing page creation service. They do an impressive job using vertical space to make sure that their call to action is the star of the show while still including a testimonial. The button itself is big, contrasts nicely with their background color, and features the extremely engaging copy, “build a high-converting landing page now” in big white letters. It’s hard not to be immediately drawn to the call to action – but it’s clear that Unbounce knows that there might be some concerns about their product, so they go to great lengths to make everything as clear as possible. Not only do they map out the exact steps for using their service in the simplest terms possible, they provide a testimonial at the very bottom of the page right below the fold. This way the testimonial is there for users who are looking for it, but the person’s face and the quote they’ve give about how useful Unbounce is doesn’t distract users who have their minds made up about the service and just need to have their attention driven to the CTA button.

8) Giftrocket

Sometimes the best way to get someone to buy your product is to simply get them started with the purchase process. While this is a rare case, occasionally people will see the value that your product brings as they fill out each required step to complete the purchase process. This is particularly true for the gift-giving industry, where the initial purchase step is intimidating, but the feel-good effects of giving a gift to someone helps steer a user to completion once they start the process.

In this instance, the call to action buttons are tailored so that they make the process seem easy, and not intimidating to users. While you might be slightly misrepresenting the difficulty of sending a gift, once you get a user to click on a button with the intention of buying someone a gift, you can rely on the feel-good power of doing so in order to offset the slight misrepresentation of how easy the process is going to be. There are very few businesses that take advantage of this strategy as efficiently as GiftRocket.

Their CTA, “Send a GiftRocket” dramatically underplays how difficult their service is to use. While it isn’t rocket science (pun intended) to get through their relatively simple fields – it does require you take about 5 minutes to sit down and fill everything out. It isn’t quite as simple as snapping your fingers and immediately sending a GiftRocket, as the CTA would suggest. That being said, because the ease of use expectation is set before a user starts the process and they’re going to be sending a gift – they stick with the process. After all, who starts buying a gift for someone they care about and then stops halfway through – even if the CTA is slightly misleading?

The Best Call to Action Buttons are Tested

Without a doubt these are 8 of the best designed call to action buttons out there in terms of the amount of thought and time that have clearly been put into them. Most of them have been on their respective sites for some time, and all signs point to them being extremely effective converters of traffic. However, it is important to note that just because a call to action button looks nice, doesn’t always mean it will function correctly. At the end of the day the purpose of a call to action button is to convert traffic – not look pretty. So don’t just create a great looking call to action button and think of the task as done and dusted. Test it! You’d be surprised by how often data can go against common conceptions of utility and beauty when it comes to calls to action on a website.

What is the best call to action button example you’ve seen? Let us know in the comments section below.