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.