Button hover effect

I saw a tutorial on Youtube where a button/object expands when hovered. The on click was explained but for the button hover effect itself, it wasn’t.

How can I add effects on the button itself when the button is hovered on and off?

Hi Leon,

As can be seen, when you hover the mouse over one element (for example, Carrot), it displays with a larger size.
For your information, that’s because the element is triggered with the Mouse Enter event and two actions:

  • Show Element: Carrot_1 (the symbol with larger image size)
  • Hide Element: Carrot (itself)

After the symbol Carrot_1 appears then you leave it, the Mouse Leave event is used along with two actions:

  • Hide Element: Carrot_1 (itself)
  • Show Element: Carrot (original image size)

Hope that it clarifies.
Have a great time.

Thank you so much for the fast response! :heart:

Ohh, so it means I have to duplicate the same element and put different attributes for the hover effect.
Does it also work if both elements (original size and enlarged size) are inside a symbol?


That depends on users’ needs, Leon.
In many cases, it is not necessary to duplicate the element. Instead, you can create interactive timelines, symbols, etc, and make everything works as you want.
But the Mouse Enter and Mouse Leaves events should be used if you want to trigger an element when hovering the mouse over it.


Got this, thank you so much!

1 Like