Elementor Button Widget

Elementor Button Widget

The Elementor button widget is a simple way to create buttons for your website. It allows you to easily customize the color, size and style of the button.

You can even change the text inside the button. All you need to do is enter some basic information like the title, URL and description.

Then, you can style your button however you like. The Elementor button widget is a simple way to create buttons for your website.

It allows you to easily customize the color, size and style of the button. You can even change the text inside the button.

All you need to do is enter some basic information like the title, URL and description. Then, you can style your button however you like.

Content

  1. Type: Default style buttons are best for quick actions, such as signing up for an account. Info buttons are perfect for in-depth content, such as blog posts. Success buttons are best for positive results, such as submitting a form. Warning buttons are best for anything with a negative consequence, such as submitting incorrect information. Danger buttons are best for anything that is dangerous or prohibited.
  2. Text: Enter the button’s text
  3. Link: Set Open in a new window if you want the link to open in a new browser tab. Set rel=nofollow if you don’t want the link to be followed. You may want to set a nofollow if your link is a CTA on your site. You can also set the button’s target to _blank if you want the link to open in a new tab.
  4. Alignment: Select the button and then click on the icon in the Properties panel to open the Alignment drop-down menu. From here, you can choose from various alignment options for your button, including left, right, etc. You can also select a justify option to align the button based on the text in the button.
  5. Size: Select the preset button sizes, from Extra Small to Extra Large (see padding default details at the bottom of this document)
  6. Icon: Select a FontAwesome icon to display on the button
  7. Icon Position: Set the icon to appear before or after the button text
  8. Icon Spacing: Adjust the amount of space between the icon and the button text
  9. Button ID: (Optional) Create a distinct button ID to be used in scenarios such as Google Analytics events.

Style

  1. Typography: Change the button’s text’s default typeface settings.
  2. Text Shadow: Give the button’s text a shadow and blur.
  3. Text Color: Choose the text color for the button.
  4. Background Color: Select the button’s background color for both Normal and Hover states. You may use a solid or gradient color or a combination of both. Make sure the Hover color is darker than the Normal one. It is recommended to use a darker shade of the Normal color for the Hover state. Select the Normal and Hover states in the gradient fill dialog box. In the Normal state, select a lighter color gradient towards the bottom of the dialog box. In the Hover state, select a darker color gradient towards the bottom of the dialog box.
  5. Hover Animation: Set a Hover Animation by clicking the Hover tab.
  6. Border Type: Choose the sort of border to surround the button with.
  7. Width: You may change the thickness of the border around the button.
  8. Color: Choose the color of the border.
  9. Border Radius: Set the border radius to determine the roundness of the corners.
  10. Box Shadow: Set the box shadow choices for the button.
  11. Padding: Modify the button’s padding settings.
Style

How to Track “Button onClick” Event (for Facebook Pixel, Google Analytics, or Google Tag Manager)

To track button onClick events, follow these steps:

  1. Edit Button > Advanced > set CSS ID = My_Button
  2. Insert an HTML widget onto the page (after the button will be fine)
  3. In the HTML Code area, paste the following code: document.addEventListener("DOMContentLoaded", function(event) {
    jQuery('#My_Button a').click(function(){
    // tracking code here
    // for example Facebook Pixel:
    fbq('track','AddToCart');
    });
    });
  4. Where you add the code depends on your site and how it is set up. The important thing is to add the code. The CSS will look something like this: /** Button Fix for Tag Manager (For Click Id triggering) **/ .elementor-button-content-wrapper {pointer-events: none;} .elementor-button span { pointer-events:none} 

    The code above will disable the comment form on your site. This is helpful if you are running a contest, survey, or other type of site that does not want people commenting.

  5. Update page, preview, test

Advanced

Select the Advanced parameters that apply to this widget.

How to Make a Download PDF Button

  1. Insert a Text Editor widget.
  2. Use the Text Editor Widget to upload your PDF.
  3. Make the page public.
  4. Navigate to the live website and copy the URL link to the PDF.
  5. Add a Button widget to another page and set the link to the URL.
  6. Tip: See this information if you want the file to download directly rather than opening in the browser.

Elementor Button Widget Preset Sizes: Padding Defaults

Top, Left, Bottom, Right

  • Extra Small: 10px, 20px, 10px, 20px
  • Small: 12px, 24px, 12px, 24px
  • Medium: 15px, 30px, 15px, 30px
  • Large: 20px, 40px, 20px, 40px
  • Extra Large: 25px, 50px, 25px, 50px

We hope this guide taught you how about the Elementor button widget. You might also be interested in getting a WordPress website built for you.

Please subscribe to our YouTube Channel for WordPress video tutorials if you enjoyed this post. You may also find us on Facebook, Instagram and LinkedIn.