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.
: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 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.
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