Streaming live at 10am (PST)

How to create a hover effect

Do you want to have any element look different when you hover over it? Usually this provides great feedback (for usability) for people when they are looking or buttons. Here’s how to do it:

Select your element:


Add a transition (if you want there to be a smooth transition when changing to a different state):


To add a Hover State, go to the inspector panel and click on the hand icon:

(This hand icon will be Purple if it already has a hover state)

Select Hover:


Add any style to this Hover class:


When you are editing the design in Hover state, you will see what it will look like when a cursor will be over it:


Final step: Test it out! You can do either:

  • Go back to the inspector, click on the hand icon and select None. Then hover over it!
  • Deselect the element (by clicking on another element or pressing ESC). Then hover over it!

Note: You cannot preview a transition (we added a 500ms one in this tutorial) when the element is selected. So deselect the button to test out the transition effect.


A post was split to a new topic: Different hover transition on mouse-out