The navigation on the page is made by using buttons as they open the hidden information and lead you to the different parts of the website.
The Button widget from JetElements allows you to add buttons with custom text and links to any content block on the website. Also, you can apply hover effects to it and add attributes to the links extra easy.
As you can see, this widget is really an irreplaceable tool.
Reading this tutorial will teach you how to add a Button widget to your site and customize it. So, let’s begin!
Creating a Button
Step 1 — Firstly, open the page to which you want to add a Button widget and click on the Edit with Elementor button to proceed. Secondly, drag-n-drop the widget to the needed section.
Step 2 — After that, you’ll see a basic style preset of the button. You can add Text, Icon, and Link to it. If you don’t want any icon, you can easily remove it.
On hover, you have a little bit different content of the button, as you can add another icon and text to it.
Step 3 — Let’s go to the Settings section. You can select the Hover Effect, which is simply an animation effect that is triggered once you hover over the button. The sides of your button will change each other with this animation effect.
Also, you can enable or disable the Icon. If you decide to use the icon, you can change its Position.
Step 4 — The next step here is to manage the Style settings block. Here you’re able to change the settings for every single element of this button.
In General settings, you can set the custom Size for the button and choose the Alignment.
On the Plane settings, you’re able to change everything about the background and even set an image background for it.
Moreover, there’s an opportunity to change the appearance of the Icon and Label of the button.
Step 5 — The last step here is to click on the Publish button and preview the result.
These easy steps are all you have to do to add a button to your website. Hope this tutorial was useful!