How to add a button in Elementor

How to add a button in elementor

Want to add some aesthetic and interactive buttons to your WordPress site? The Button Widget helps you easily design and customize buttons without the need for any other plugins or shortcodes.

In this blog, we are going to show you how to add a button in Elementor so let’s get into it.

Add the Button widget to the page

Assuming that the user has a page created and wants to add buttons to it for navigation and other functions. Let us add the button widget to the page.

Firstly, open the page to which you want to add a Button widget and click on the “Edit with Elementor” button to proceed. Secondly, Search and Select the button you want to add and drag-n-drop the widget to the needed section

We are going to use the simple button widget for the sake of giving you an idea that how these widgets work.

Customize the Button Widget

Search the image widget in the search bar and then drag and drop the widget in the section.

Open the Content left-side menu tab and unfold the Content section. You can add Button Icon and Button Label Text for the Normal state of the button and when the user hovers a pointer over it. In the Button Link field, you can add a link to the page the button will lead.

Following are the options in the content tab:

Content Tab

Type: Select from 5 styles of buttons to begin your design. Choose from Default, Info, Success, Warning, or Danger

Text: Enter the button’s text

Link: Set the URL for the button’s link. Click the cog to set the link to either open in a new window or to add rel=nofollow to the link

Alignment: Align the button to the left, center, right, or justified about its column.

Size: Select the preset button sizes, from Extra Small to Extra Large

Icon: Select a FontAwesome icon to display on the button

Icon Position: Set the icon to appear before or after the button text

Icon Spacing: Adjust the amount of space between the icon and the button text

Button ID: (Optional) Assign a unique button ID to use for situations such as Google Analytics events

Manage the Style settings block. Here you’re able to change the settings for every single element of this button

Style Tab

Typography: Change the default typography options for the button’s text

Text Shadow: Add a shadow and blur to the button’s text

Text Color: Select the color of the button’s text

Background Color: Select the button’s background color for both Normal and Hover states. You may use a solid or gradient color

Hover Animation: Click on the Hover tab to set a Hover Animation

Border Type: Select the type of border to use around the button

Width: Control the thickness of the border around the button

Color: Choose the border’s color

Border Radius: Set the border-radius to control corner roundness

Box Shadow: Set options to apply a box-shadow on the button

Padding: Change the padding settings of the button

Here is what our buttons looks like as of now.

Conclusion

Alright! Now you know how to add a button in Elementor. We hope this guide has helped you.

Feel free to contact us if you need any help regarding this topic. Do let us know the topics you want us to cover in the comment section or reach out to us with your queries by clicking the contact form below.

🚀 Introducing Our New Slack HR Bot: Effortlessly Track Attendance Within Slack! - Learn More

How to add a button in Elementor