Skip links

10 Tips For Website Button Design To Increase Conversions

For such a small little thing at the bottom of your landing pages, buttons have an immense amount of power. While your website design and content determine whether a user will engage and move through the flow of your site, your button is the narrow straight a user must pass to continue on your sales funnel.

With that said, there are several key factors you can consider when designing and implementing your buttons. It’s not nearly as simple as you might think.

Let’s start by defining a button. A button on a website is a piece of written copy combined with imagery to indicate to your users what you want them to do. Buttons are literally the bridges between what they’re reading about and the offer of the product or service they’re interested in.

With this in mind, it’s hopefully clear how important it is to put careful consideration into the creation of your buttons. With that said, here are 10 tips you can utilize to make sure you maximize the potential of the buttons on your site.

1. Use Color to Make Your Buttons Stand Out

First and foremost, your buttons should stand out against the rest of the design of your site. There’s a lot you can do to make your buttons pop and draw a users eyes to them. You can use borders, shadows, and gradients to differentiate your buttons, and you can make them stand out by adjusting the typefaces you use.

With that said, don’t go overboard with your buttons. They need to stand out, but they also need to fit in with the rest of the design. A good way to determine if your buttons stand out is to create several and do a glance test. Line them up on your site and simply give them a glance and see which ones your eyes drift to naturally.

2. Keep Your Button Designs Simple

This tip is somewhat of a counter-balance to the first one. While it’s true that your buttons need to stand out, you also want to keep a sense of elegance with them. User experience testing has shown that the best buttons to entice click-throughs and conversions are ones that are simple with a few eye-catching design elements.

With that in mind, be conservative when designing your buttons. There’s a concept in design called “noise,” and it’s basically this: Everything you do in design has a volume level. This means colors, shadows, borders, and other design elements all contribute to the volume level. If you make something a very contrasting color, this ups the volume considerable. So with a loud color, you probably don’t want to do a whole lot more. A simple drop shadow might put the button exactly where it needs to be.

3. Be Mindful of Button Sizing

When it comes to buttons, bigger isn’t always better. It might seems like it makes sense to make your button large, but if it doesn’t fit in with the design language of your site, it’s going to look unnatural and your users will back out.

Conversely, make your buttons too small and your users have to think too much about clicking it. It’s good to make your buttons large enough that they’re noticeable, but give them some nice breathing room too.

4. Give Your Users Choices

People love to have a choice. But it’s important to manage these choices so that your users don’t get overwhelmed. Generally speaking, having more than two buttons can start confusing a user.

This is a particular useful strategy to employ when creating call-to-action buttons. When I user has read through your landing page and come to your CTA button, it’s possible they haven’t been entirely convinced. This is where giving them a second choice could keep them in your sales funnel. You might have a CTA that gives them the option to “Sign Up Now” and then one where they can “Find Out More.”

5. Make Your Buttons Look Clickable

This falls into the realm of design language, and it’s going to be a bit different for every site’s buttons, but there are a few things to consider that help people know that a button is a button.

For one, buttons are almost always rectangle shaped. They may have rounded corners or stylized edges, but they’re almost always shaped like a rectangle. This is universally understand.

Secondly, buttons are always separated with a clear boundary and have ample white space around them. This is to differentiate the button from the rest of the site. And while a bit of this is covered in the first two tips, this is something that’s worth driving home: Make your button look like a button.

6. Make Your Buttons Obvious Choices

The patterning and flow of a site design is important in guiding a user through a page. And buttons play a large part of this. As a user is reading your content and learning about your product or service, they’re scanning and flowing through the page. Your buttons should be the logical conclusion of this process.

One way to help you determine how to place your buttons is through the usage of heat maps. This can help to show you how a user is progressing through your pages and help determine the best possible placement of your buttons.

7. Keep Button Text Simple

The text you put in your button can mean the difference between a conversion or a user backing out of your site. Your button’s copy should be succinct. It should be clear, concise, and get straight to the point.

By the time a user gets through the flow of your page, if you’ve done everything else correctly, they should be ready to click. The rest of the page, if you’ve done your job correctly, should serve to entice them to click that final button. And so they shouldn’t have to read a bunch of copy to do so. Explicitly tell them to sign up now, create an account today, or purchase this product.

8. Make Your Button Copy Pop

This goes hand-in-hand with the previous tip. While it’s important to keep your button’s text short and sweet, you also want it to do what it needs to do and encourage users to click it.

One way to do this is to make use of verbs to give your button a sense of momentum and entice action on the user’s part. A few examples are:

  • Reserve
  • Own
  • Get
  • Try
  • Use

Combining these verbs with timing words can also have the effect of making your page and product a sense of urgency. Examples would be:

  • Today
  • Now
  • Immediately

9. Utilize the First Person

Readers become the most engaged with copy that’s written in the first person. And this applies to buttons as well as content. When you lend a sense of first person to your button text, it can inspire ownership in your audience and compel them to click the buttons. Consider the text: “Get my free copy now.” This gives the sense that whatever results in clicking this button, it’s already the user’s. They already have ownership. All they have to do is click a little button.

10. Create Urgency

One of the best ways to get users to click your buttons and convert is to create urgency with your button copy. Creating urgency is a pretty common practice in the world of marketing and it’s because it works.

You can create urgency by coupling a special offer with something that’s happening right now. Examples:

  • “Buy now and get 20% off”
  • “Act today and get one free”
  • “Order now and get free shipping”

A good way to create further urgency is by adding a counter that’s counting down to your site somewhere near your button.

And another good way — and one that Amazon uses on their site — is to show a limited number of inventory remaining. This can get people to act immediately.

Summary

When it comes to the buttons on your site and getting the users to click on them and convert, there are no easy routes. As you can see, a button is not just a button. There are endless strategies and tactics you can use to squeeze every last conversion out of the visitors on your page. But there’s also no way to get every last person that visits your site to click through.

But if you employ the techniques and tips in this guide, and focus on testing and refining the techniques specific to your site, you’ll see your click-throughs and your conversions continue to rise.

Need Help Growing Your Business?

Contact our CEO directly to set up a time to talk about your marketing goals.