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.

1. Create 3 versions of a button and save it as PNG files with transparent background. I used Affinity Designer for this.

2. Add any animated button from: Menu > Button

3. Click on the button and go to "Change Icon"

4. Swap each version of the icon to your custom PNGs: Regular, Hover, Clicked

5. Change transition from None to Dissolve

6. 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.

#wix #burgermenu #design #tutorial