Button Design: Best Practices to Make a Big Impact

During the website design process, we talk a lot about the importance of mapping out the user journey. This includes being intentional by including calls-to-action (CTAs) at the end of each page and guiding users to their next steps.

The user journey also includes smaller CTAs throughout the page – often in the form of buttons.

Buttons serve as pathways to other pages on your site, so their design is an important consideration. You probably understand that these elements need to stand out to grab your users’ attention, but what else is there to know?

Let’s take a look at some button design considerations and best practices.

Color & Contrast

The importance of color cannot be overstated.

Buttons should be highly visible, standing out against other content on the page. This goes beyond just selecting a bright color, though – you also need to consider accessibility.

In order to pass current WCAG standards, buttons need to stand out against the background of the page with a 3:1 ratio, and the text needs a high enough contrast ratio against the button’s background color (4.5:1 for small text and 3:1 for larger text). You can test different color combinations using accessibility tools like Adobe Color.

Hover Effects & Button States

By default, buttons are an interactive element.

Interactivity can be indicated in different ways, but the most common type is a hover effect – where the cursor lands on the button and its appearance changes. (There are additional button states, outlined by Nielsen Norman here.) The visual change helps communicate to users that the element is clickable and encourages them to engage further.

Hover effects can include also animation, adding unique design personality and flair to your site.

Keep in mind that while the change on hover should be obvious, it shouldn’t be distracting. Any interactivity added to your site should still align with your brand.

Language & Specificity

As much as possible, buttons should avoid generic language like “Click here”.

Opt instead for action-oriented phrases that provide context to what page is linked. As an example, “View Our Services” is more specific than “Learn More” and helps users set their expectations.

When possible, personalizing the text can help too. (For example, “Get My Free Marketing Guide” will draw people in more than “Download the PDF”.) Keep the language simple, and direct your users to their next move.

Size & Location

The final consideration to make is button size and placement.

Buttons should be grouped with relevant content so that it’s immediately clear the two elements are related. For example, if there are multiple columns of text side-by-side, containing the content and button within a box can help the user distinguish between the different options.

Button size is also a key consideration, especially for mobile designs where you need to ensure buttons are easily clickable on smaller screens. A good general rule of thumb is to provide approximately 42 pixels of space to click.

Overlooking the design of your buttons can make or break the user experience on your site, so take the time to review and ensure you’re being thoughtful of these four considerations. If you still have questions about best practices, reach out to us – we can help!