This short tutorial will show you how to create a bespoke burger menu button using WIX Buttons.
The button will react when you hover and click on it.
In order to achieve desired effect, you need to design 3 versions of the menu button - one for each variation (Regular, Clicked and Hovered).
I used affinity design software and saved my icons as PNG files with transparent background.
Create 3 versions of a button and save it as PNG files with transparent background. I used Affinity Designer for this.
Add any animated button from: Menu > Button
Click on the button and go to "Change Icon"
Swap each version of the icon to your custom PNGs: Regular, Hover, Clicked
Change transition from None to Dissolve
Link the icon to the lightbox menu
Here is a short video:
Check out my other post that explains how to design side menu using lightbox feature on WIX.