Button Design Guide

What is a Button in Design?

In essence, buttons are interactive elements that help the user understand what activities are feasible to execute through clicking on one.

1. Call to Action

Users are typically prompted by call to action buttons to perform important actions like “sign up,” “register,” or “add to cart”.

Types of Button

2. Primary Buttons

Primary buttons can be utilized when a user wants to proceed “next” or “Proceed to check out”.

Types of Button

3. Secondary Buttons

Secondary buttons, such as “Go Back” or “Cancel,” provide an alternate route to the principal action and are placed adjacent to major buttons.

Types of Button

4. Ghost Buttons

Ghost buttons lack a fill, consisting solely of an outline. They are generally used to denote a secondary or even tertiary activity.

Types of Button

5. Toggle Buttons

A user can switch a setting between two states using toggle buttons or when a user has the option to switch an element on and off, such as the “Favorite” button.

Types of Button

6. Floating Action Buttons

Floating action buttons float above the screen and frequently stay there throughout various interfaces.

Types of Button

7. Hamburger Button

This is the button that hides the sites/apps menu. Once you click on it, the menu drops down and expands, revealing other buttons.

Types of Button

8. Plus Button

The ‘plus’ button is mostly used to let the user know that he can add additional content to the system like a post, contact etc.

Types of Button

9. Expendable Button

This button is mostly used as a facilitator to enhance interaction flows by overloading the screen with unnecessary information.

Types of Button

10. Play Button

The play button is characterized by its attractive hover effect where the icon on it changes from the play symbol to the pause symbol.

Types of Button

1. Button Design: Rounded Vs Square

Depending on the impression you want to give the user, rounded is more pleasant, sharp is more serious.

Things to Consider When Designing a Button

2. When to make use of the Icon

Icon buttons allow more flexibility in placement due to their reduction in size. You’ll observe that FABs all frequently employ this design.

Things to Consider When Designing a Button

3. Spacing and Padding for Buttons

The ideal button spacing, as a general rule, falls between 12 and 48 pixels. Recent research indicated a distance of 6.35 mm, or 24 pixels.

Things to Consider When Designing a Button

4. Feedback and Button States

To help users comprehend the effects of their actions, button states are used. Some states are ‘active/inactive’, ‘hover on/off’ and ‘pressed’.

Things to Consider When Designing a Button

5. Size and Position of Button

Placement and size makes sure that the buttons you’re designing are simple to see and use. More attention is paid to larger buttons than smaller ones.

Things to Consider When Designing a Button

6. Microcopy On Buttons

“Microcopy” is the text that appears inside a button and describes the action or result that will happen if the button clicks it.

Things to Consider When Designing a Button

7. Choosing Right Color Strategy

Designers can influence buttons to trigger particular behaviors through color. The brightest speck of color we see immediately catches our attention.

Things to Consider When Designing a Button

Leverage our

UX Design

expertise to bring your product ideas to life.