As common as buttons are, it should not be forgotten that they are a central part of web design with important functions:

Buttons often make up the main call to action

Buy buttons greatly influence revenue

Email sign-up buttons help build your list

Form submission buttons are important for lead generation

Social buttons help share your content

Because of that, in this post, we will give you a number of button design guidelines and best practices. The goal is to help you create buttons that convert and bring you closer to achieving the goal of your website.

Just a short caveat: While the best practices below will help you create better buttons, to truly know what will increase your conversion rate, you should employ A/B split testing. Only by trying out different alternatives will you find out which kind of button will improve your site.

Button Design Guidelines to Help You Create Better Buttons

The guidelines below will help you create buttons that will attract clicks and user attention.

1. Make Sure They Go Well With Your Website and Branding

Buttons need to stick out (so that users click on them) but in a positive way.

For that reason, while following the button design guidelines, also make sure the result integrates well into the context it appears in. Take your existing branding and design into account and see that your buttons harmonize with the color palette and style of your site.

At the same time, don’t shy away from experimenting. A splash of daring color might be just what your site needs to increase conversions.

2. Stick With Established Design Conventions

This point should be self-explanatory but often isn’t. For users to click on buttons, they need to be aware that that option even exists. If your design is too far outside of the usual conventions, it might prevent users from recognizing a button even exists.

So, what are those conventions?

The first is shape. Thanks to the long evolution of computers, the most familiar shape is a rectangle (with or without rounded corners). Just look at WordPress.

Users have been exposed to style for such a long time that they will easily recognize it. Of course, by now other have also been established and are another good place to start from.

Furthermore, an important design clue for buttons are shadows and highlights. Drop shadows have become the universal signal that something can be clicked on or tapped. Therefore, don’t forget to make your buttons feel more convex.

Whichever button shape and design you choose for your website, just be sure to stay consistent. If your buttons differ too much, they will confuse users and prevent them from taking action.

3. Use Clear Labels

The next point on our button design guidelines are labels. Without a clue of what a button does, users have no way of determining whether clicking it makes sense for them. See Publish button above.

This doesn’t necessarily have to be text, icons can also be sufficient. You can see that in the social sharing buttons which have become ubiquitous.

A combination of both text and images is also possible. The only thing that matters is that the user can identify the effect a click on a button will have. If they don’t, they likely won’t take your desired action.

Be sure to make your labels descriptive and specific, use verbs that describe the action it will perform (like buy) and create urgency with words like now. This is especially important for calls to action, which are often the central part of any web page.

4. Button Size and Spacing

Getting the spacing and size right is especially important for mobile design. Using a website with your finger is less precise than with a mouse, simply because the “cursor” is much larger.

The important part here is to create buttons in a way that a) makes them usable and b) prevents users from accidentally tapping the wrong thing.

There seem to be no concrete rules for spacing. Just make sure your buttons are arranged in a way that makes it unlikely to hit the wrong one. Providing enough space can also help set apart more important buttons like calls to action.

5. Implement Feedback

Once you have designed your buttons in a way that users can clearly identify, the work doesn’t stop. The next question is: what happens when they use a button? As it turns out, these design elements have more than one state:

Normal — You can clearly see that it’s a button, the element invites interaction

By providing feedback, you can make the interaction clear and more exciting. It’s a visual reward for users to see that their action has an effect.

6. Position Them Visibly

Of course, when you have designed your buttons, the final step is to make sure users can find them. Otherwise, how will they click on them? For that reason, picking the right button location is also important.

Here, too, it makes sense to go with established conventions. For example, most people expect the main call to action to be above the fold, so that’s a good place to put it.

While it can make sense to break conventions every now and then, you always run the risk of confusing users. This, in turn, highly affects their perception of your site. Test different possibilities to settle on the one that works best.

7. Contrast From Rest of Design

Positioning your buttons well also means providing enough contrast. By making buttons stand out from the rest of the design, you make it clear that interaction is possible and desired. It also prevents your buttons from getting lost.

Here are your general tools for creating contrast:

Color — Use contrasting colors, including for the button label

Size — Bigger elements stand out more

Typography — Bolding text or using a different font can attract attention

Whitespace — More breathing room around an element means more focus on it

A good way to figure out if the contrast is high enough is to use the squint test. For that, simply move away from your screen, squint your eyes and see if the button still stands out.

How to Create Buttons in WordPress

Now that you know how to make buttons look good, the question is, how do you get them on your site? Fortunately, the new Gutenberg editor makes this really easy.

1. Create the Block Element

You can create a button in Gutenberg like any other block element. Simply click on the plus symbol on the left. When the menu opens, scroll down to Layout Elements to find the button.

Click it to add it to your page.

2. Configure Button Text and Destination

Upon click, WordPress opens up this menu.

You have the following options here:

Change orientation — Use the symbols at the top to align the button to the left, center or right of your page

Edit button text — Simply click into the button to change the text to whatever you want, setting the text to bold, italic or strikethrough is also possible

Input destination — Where it says Paste URL or type, you can determine where the button will take visitors upon click

3. Edit the Design

Once done with that, it’s time for styling. For that, you find the option to change the button and text color with just a few clicks on the right side.

Either select one of the available options or use the color picker to generate a new shade. You can also input a hex code of a specific hue you want. The editor even warns you if you pick a color combination that will be hard to read.

In addition to that, under Advanced you have the ability to add a custom CSS class to the button. That way, you are able to create a custom design with some CSS markup including hover effects and more.

And that’s it – the simplest way to add a button in WordPress.

Button Design Guidelines in a Nutshell

Buttons can be sidelined a bit in web design as many think of them as common elements. However, the role they play should not be underestimated. Buttons influence everything from conversions and sales to email signups.

Above, we have given you button design guidelines you can use to make yours more effective. Let’s recap them real quick:

Make sure your buttons go well with rest of your site

Make them clearly identifiable as buttons

Add clear and distinct labeling

Add enough size and spacing

Provide visual feedback to users

Place buttons prominently on your page

Establish enough contrast from the rest of the page

Following these guidelines will help you create better buttons for your WordPress site. Plus, you now also know a simple way to include buttons on your pages.

However, don’t forget: theory can’t replace testing. Once you have created your buttons, be sure to test different alternatives in order to find the ones that work best.

Do you have any other button design guidelines you would like to share? Let us know in the comments section below.

Nick Schäferhoff is an entrepreneur, online marketer, and professional blogger from Germany. He found WordPress when he needed a website for his first business and instantly fell in love. When not building websites, creating content or helping his clients improve their online business, he can most often be found at the gym, the dojo or traveling the world with his wife. If you want to get in touch with him, you can do so via Twitter or through his website.

Zone principale de widget pour la barre latérale

Portfolio

FAITH’s team is made up of professionals who have amassed real world experience in their respective fields. They share FAITH’s vision and recognize the importance of raising the capacity of Mauritius’s non-profit sector. They invest their time and skills to build and share fresh, innovative and relevant capacity building material to help vulnerable groups.

The Financial Services Promotion Agency (FSPA) will host the maiden edition of the Finance Africa Conference, in Mauritius, on the 1st and 2nd of June 2017. The conference will attract more than 300 delegates and will see the participation of leading Fund Managers, CEOs, CIOs, Investment Advisors, Legal Advisors, Investment Bankers, Private Equity Experts, Brokers and Corporate Services Providers from around the world.