All Collections
FAQs for Design
How to Change Button Color on Hover
How to Change Button Color on Hover
Michal avatar
Written by Michal
Updated over a week ago

A super easy trick that makes your website and prototype fun to use.

This trick will work for any of the Anima plugins, in Sketch, Adobe XD, or Figma.


  1. Create two identical shapes that will represent each state of the button: Hover On and Hover Off

  2. Choose the color for each state: Blue for when the hover is OFF, and Dark Blue for when the hover is ON

  3. Stack the two shapes on top of each other with the Dark Blue at the bottom and group them together.

  4. Select the shape on the top, "hover off", go to Smart Layers in Anima panel and select Hover Effect

  5. From the Hover Effects presets, select Fade Out and Save. This setting will make the Blue button disappear when the mouse is over it and show the Darker one under it.

  6. Click "Preview in Browser" to see it live!

Learn More

Did this answer your question?