States, also known as pseudo-classes, let you apply a style to a component when it's in a special state i.e. when a user is hovering over a button.

Support States:

Active

The :active state represents an component (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the mouse button.

Hover

The :hover state matches when the user interacts with a component, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor.

How to activate a state (example involves the Hover state)

• Add component (only certain components accept transitions: links, text, buttons, containers).

• Navigate to your Transition design properties

• Select your property - 'All' is usually a safe bet

• Set your duration

• Setting your easing

• Navigate to one of the hover state

• Design your components 2nd state

​