Buttons allow users to take actions and make choices in an interface with a click or a tap. Buttons are used throughout every user interface design to communicate actions that users can do.

Button Actions

The different button actions are used to give buttons varying hierarchies making some have more important actions, while some have less important ones.

1. Call-to-Action Button. A call-to-action (CTA) button prompts the user to take a recommended action. CTAs are used to tell what the interface wants the user to perform.

   

2. Primary Action Button. Frequently interchanged with a CTA button, a primary action button is a strong visual indicator that helps users in completing a task on the website. A primary action button must have a strong visual weight and distinct contrast among its surrounding elements.

   

3. Secondary Action Button. Secondary action buttons are alternative options the interface offers to users that come along with a primary action button. As compared to a primary button, the secondary button style has a significantly weaker visual attraction to reduce the risk of users making an error.

   

4. Tertiary Action Button. Tertiary action buttons are miscellaneous actions that users can take but are not necessary for a website's task's progression. Visually, tertiary action buttons have the weakest weight for its optional nature.

   

Button States

Buttons states let the user know what action can be done or is currently being received through previewing visual feedback to the user.

1. Active State. A button's active state is usually one's normal state, too. This state is shown when a button can be interacted with through a click or a tap.
2. Disabled State. A disabled state of a button is displayed when a button is not interactable. Frequently, a button is disabled when the user hasn't completed all the steps necessary to proceed.
3. Hover State. A button's hover state shows visual feedback to the user when hovered indicating that the button is interactable. Hover states are not necessary for mobile devices since technology isn't advanced enough to detect if a user's finger is hovering a button ;P
4. Focused State. A focus state of a button is accessible once a user opts to navigate a website by repeatedly clicking 'tab'. This state indicates that the button is highlighted and will take the next action taken by the user.
5. Pressed State. A button's pressed state is shown when the user's cursor or finger is 'holding down' on the button.
6. Clicked State. A clicked state of a button is shown when the user releases their cursor or finger over the button. This state gives visual feedback that the button was already clicked and the action is being processed by the system.

Button Styles

Button styles are responsible for creating the context of how the message of the button is perceived by the user.