How to create a burger menu button using WIX buttons

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.