Button Design Guide: How to Get Site Visitors to Actually Click Your Buttons

Buttons are one of the most common UI elements. They make it possible for users to interact with a system and take action by making selections. Buttons are used on forms, website homepages, dialog boxes, and toolbars.

01 ButtonDesign

It is important to differentiate between buttons and links. Buttons are used when you want a user to act (submit, cancel, delete) and links are used to direct users to other pages (about me, read more). 

Great button design makes it easy for users to take the action that you want them to take which increases conversions. This article will give you a complete guide on how to create irresistible buttons that your site visitors will want to click. 

Anatomy of a Perfect Button

Before we discuss how you can design irresistible buttons we need to examine the anatomy of a perfect button. A button has the following elements: Text label, background, border, and an icon. Other than the text label all other elements are optional. 

Anatomy of a button 

What to Avoid When Designing a Button 

Buttons that don’t look like buttons

Before a user can click on your button, they have to know that it’s a clickable element. Make it easy for users to click on your buttons by making it obvious that they are buttons. Users depend on previous experience and visual cues to determine whether a UI element is interactive or not. 

While it might be tempting to use cool web button designs, don’t sacrifice usability. Avoid confusing your users and creating friction by using familiar button designs. Examples of common button designs include: 

  • Square button with fill
  • Round button with fill 
  • Round button with fill and shadows
  • Outline/ghost button

Fills and shadows make it easy for users to identify buttons because they make them look press-able. Additionally, ensure that there is enough white space around your buttons to make them stand out even more.  

Examples of common button designs 

Vague or misleading button labels

If the label of your button is vague or confusing, it can prevent users from taking action or make them take the wrong action 

Use labels that clearly explain what the button does and affirm the action that the user is about to take. It is also important to consider the context of the button and adapt the label accordingly. Avoid ‘yes’ or ‘no’ labels and instead, use descriptive labels like ‘Delete’ or ‘cancel.’

Clear button label that affirms the action that the user is about to take

Buttons that don’t provide visual feedback about their state 

“The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.”

— Jakob Nielsen

A great button should change its state once a user interacts with it. Users require feedback that tells them if their action has been registered successfully or not. When there is no feedback, users might act over and over again. Feedback can either be visual or audio.

Design buttons that have states such as:

  • Primary state-button is interactive and ready to be used
  • Active -User has pressed the button 
  • Hoover– Cursor is placed above the interactive element
  • Focused – Button has been highlighted using a keyboard
  • In progress– The action is being processed 
  • Disabled – Button is not interactive 

Different button states 

Inconsistent button design 

“Consistency is one of the most powerful usability principles: when things always behave the same, users don’t have to worry about what will happen.” — Jakob Nielsen

Create buttons that have the same size, shape, and color throughout your site. Having a design library and a style guide helps with this. A consistent button design helps your users take action faster and avoid errors. Plus, it improves the overall look and feel of your site. When there is no consistency, users get confused and they are more likely to make errors. 

Consistent versus inconsistent button design 

 Using too many buttons 

“Rule of thumb for UX: More options, more problems.”

— Scott Belsky, Chief Product Officer

Too many buttons make it difficult for users to act, this is known as The Paradox of Choice. Instead of stuffing your design with buttons, think of the most important action that you want your users to take and prioritize it. 

Button Hierarchy and Actions

Button hierarchy provides a useful signal for users to determine the most important task on a system. Here are the most common website button design hierarchies and how you can use them to guide users. 

CTAs

Call to action (CTA) buttons direct users to take the most important action that you want them to take. An effective CTA button grabs the user’s attention and makes them click. A CTA button should be big, have high contrast, and be placed in the user’s line of sight. 

Common CTA’s include website buttons such as UXPin’s that has a very prominent “Join for free” CTA button with high color contrast. 

A great CTA button 

The Psychology Behind Effective CTA Button Copy 

For a CTA button to be effective, it needs more than just good design, it also needs copy that drives action. Poor CTA button copy is confusing, it causes errors and makes users bounce.  

Here are a few psychology backed tips to strengthen your CTA copy:

Use action words: Using copy that uses action verbs instead of generic phrases drives users to take action. Instead of giving your users a “yes or no” option use “Save or Discard.” 

Use precise language: Don’t leave anything open to interpretation or misinterpretation. Don’t say “Remove” when “Delete” would be a much better option. 

Use language that affirms the user’s action: Use words that specify the action that the user is about to take such as “Publish” rather than just “Submit.” This removes uncertainty and gives the user confidence to act. 

Use imperatives: Imperatives turn phrases into commands. They reduce the number of words on button copy making it easy to read. Instead of “Yes, create my account” simply use “Create account.”

Primary Actions

Primary actions drive users to the next positive action such as going to the next page, completing an action, or starting a user journey. These web buttons should carry more visual weight and they should be more visually dominant to encourage the user to take the positive action. 

Secondary Actions

Secondary actions are alternatives to primary actions. They include ‘back’ and ‘cancel’ buttons. These website buttons should have lower visual prominence to reduce the risk of error and to encourage positive primary action. 

The difference in visual prominence between primary and secondary actions

Tertiary Actions

Tertiary actions are important actions that users might not need to take. These actions include editing, adding new information, or deleting. The difference between primary and tertiary actions is determined by the context within which the action is taken. 

It is good practice to use smaller buttons that are not very prominent for tertiary actions. 

Best Practices for Button Styles, Color, and Design

Button Shape

The best practice for web button shape is to use square buttons or square buttons with rounded edges. These button shapes are recommended because it is easy for users to recognize them as buttons. 

There are other button shapes that you can use but they should be used carefully because some users might not recognize them. They include:

Round buttons: These are buttons with rounded edges. 

A round button

Ghost/line buttons: These are buttons that have no solid fill. They are best used for secondary actions. 

A line button 

Floating Action Buttons (FAB): This button is used for primary actions. 

A Floating Action Button 

Icon and label buttons: These buttons have both an icon and a label. 

An icon and label button

Icon buttons: Because these buttons have no labels, they are easy to stack. 

An icon button 

You can use padding and sizing to enhance the visibility of your buttons. Ensure that your buttons are big enough for mobile users to tap. 

Color Palettes 

The first thing to consider when choosing the color palette for your website button design is color language. Red buttons mean stop, green buttons for websites mean go and blue buttons mean more information. 

Also, consider your brand colors and style guide when choosing button colors. Be sure to maintain uniformity for consistent user experience. Make sure that your buttons have enough contrast and they meet web accessibility guidelines. 

Color language

Button Placement and Page Layout 

When deciding where you will place your button and the page layout, the context matters a lot. For CTA’s it is best to center the website button and put it high up the page so that it can grab the attention of the user. 

For primary action buttons for websites, the jury is still out on the best placement. Option A is when the primary action button comes first and in option B it comes last. The best course of action is to ask yourself what the user expects to see first in your specific context. 

Button placement 

Design Buttons With The Best UI Tools

For you to design buttons that get clicks, you need the best tools to help you turn your mockups into beautiful buttons. UXPin provides an all in one platform for you to design, prototype, and collaborate with your team. Maintain consistent button designs with the design pattern library and check your buttons for accessibility with our contrast checker. 

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you