How to Use the Button Widget in Elementor

The Button Widget helps you easily design and customize buttons without the need for any other plugins or shortcodes.

Content

1. Type: Select from 5 styles of buttons to begin your design. Choose from Default, Info, Success, Warning, or Danger
2. Text: Enter the button’s text
3. 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
4. Alignment: Align the button to the left, center, right, or justified in relation to its column.
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) Assign a unique button ID to use for situations such as Google Analytics events

Style

1. Typography: Change the default typography options for the button’s text
2. Text Shadow: Add a shadow and blur to the button’s text
3. Text Color: Select the color of the button’s text
4. Background Color: Select the button’s background color for both Normal and Hover states. You may use a solid or gradient color
5. Hover Animation: Click on the Hover tab to set a Hover Animation
6. Border Type: Select the type of border to use around the button
7. Width: Control the thickness of the border around the button
8. Color: Choose the border’s color
9. Border Radius: Set the border radius to control corner roundness
10. Box Shadow: Set options to apply a box shadow on the button
11. Padding: Change the padding settings of the button

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

Follow these steps to track button onClick events:

1. Edit Button > Advanced > set CSS ID = My_Button
2. Add an HTML widget to the page (after the button will be fine)
3. Paste the following code into the HTML Code field:
   

<script>
document.addEventListener("DOMContentLoaded", function(event) {
  jQuery('#My_Button a').click(function(){
  // tracking code here
  // for example Facebook Pixel:
    fbq('track','AddToCart');
  });
});
</script>

4. Add the following CSS to your sites custom CSS region. This may be in your Theme Customizer, Site Settings, Custom Code, or child theme.
   /** Button Fix for Tag Manager (For Click Id triggering) **/ .elementor-button-content-wrapper {pointer-events: none;} .elementor-button span { pointer-events:none} 
5. Update page, preview, test

Advanced

Set the Advanced options that are applicable to this widget

How to Create Gradient Backgrounds for Buttons

How to Make a Download PDF Button

1. Add a Text Editor widget
2. Upload your PDF through the Text Editor Widget
3. Publish the page
4. Go to the live page and copy the URL link pointing to the PDF
5. Now, in another page, add a Button widget and set the link to the URL 
6. Tip: If you want the file to immediately download, rather than opening in the browser, see this info.

Button 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