The Button Widget helps you easily design and customize buttons without the need for any other plugins or shortcodes.
Content
Type: Select from 5 styles of buttons to begin your design. Choose from Default, Info, Success, Warning, or DangerText: Enter the button』s textLink: 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 linkAlignment: Align the button to the left, center, right, or justified in relation to its column.Size: Select the preset button sizes, from Extra Small to Extra Large (see padding default details at the bottom of this document)Icon: Select a FontAwesome icon to display on the buttonIcon Position: Set the icon to appear before or after the button textIcon Spacing: Adjust the amount of space between the icon and the button textButton ID: (Optional) Assign a unique button ID to use for situations such as Google Analytics events
Style
Typography: Change the default typography options for the button』s textText Shadow: Add a shadow and blur to the button』s textText Color: Select the color of the button』s textBackground Color: Select the button』s background color for both Normal and Hover states. You may use a solid or gradient colorHover Animation: Click on the Hover tab to set a Hover AnimationBorder Type: Select the type of border to use around the buttonWidth: Control the thickness of the border around the buttonColor: Choose the border』s colorBorder Radius: Set the border radius to control corner roundnessBox Shadow: Set options to apply a box shadow on the buttonPadding: 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:
Edit Button > Advanced > set CSS ID = My_ButtonAdd an HTML widget to the page (after the button will be fine)Paste the following code into the HTML Code field:document.addEventListener("DOMContentLoaded", function(event) { jQuery('#My_Button a').click(function(){ // tracking code here // for example Facebook Pixel: fbq('track','AddToCart'); });}); 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} 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
Add a Text Editor widgetUpload your PDF through the Text Editor WidgetPublish the pageGo to the live page and copy the URL link pointing to the PDFNow, in another page, add a Button widget and set the link to the URL 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, 20pxSmall: 12px, 24px, 12px, 24pxMedium: 15px, 30px, 15px, 30pxLarge: 20px, 40px, 20px, 40pxExtra Large: 25px, 50px, 25px, 50px