Button

Buttons communicate actions that users can take. They are typically placed throughout UI including dialogs, modal windows, forms, cards and toolbars.

Motion Functions

Guidance Function

Aesthetic Function

Emotive Function

Feedback Function

The primary function of a button is Guidance. Buttons are used to navigate through the interface. They indicate where to interact with an interface and guide the user through a particular set of actions.

Buttons can also have a set of secondary functions. They can be used to convey emotions based on the motion design used. In certain instances, they can be playful, aesthetic expressions that convey the brand language. Buttons can also have a feedback component integrated into them as the user waits on an action to be performed.

Examples

Button // Next - Previous Action by Cosimo Scarpa

In the above example, the button has a left and right arrow to guide the user as to when the action will lead them towards. The button also leverages the principle of dimensionality to provide a narrative element to the interaction and visual design. The button slightly skewed to the direction in which it is clicked provides feedback to the user about where the click has been registered and the direction of the action.

Publish button animation by Aaron Iker

In this example, the button uses principles of Transformation to communicate the actions taken and provide feedback to the user. The button expands to fit the text dynamically as it changes and the arrow squashes and stretches with the clouds behind it moving faster to show a parallax effect. This simulates the idea of the arrow moving through space by manipulating the shapes and position of a few parameters.

Star Button by Edoardo Mercati

In this example, the star button provides guidance and feedback to the user while using a playful star motif for its aesthetic. The button has a greyed-out star that transforms into a fully colored star while hovering. When clicked, the word "Starred" moves in first, and then the value update is offset to have a more apparent impact on the action. The fast movement of the star in the button conveys a presence of energy and impact within the button.