Button Widget Tutorial

Intro

Create an eye-catchy call to actions using Elementor Button Widget with lots of customization options and hover effects. In addition, you will have the ability to add an icon to it by choosing from a list of Font Awesome icons.

Click here to check Premium Button Widget demo.

Requirements:

  • You will need Premium Addons free plugin installed and activated on your website.
  • Also, make sure that this widget/feature/addon is enabled so you can find it in the Elementor editor
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Key Features

  • Text
  • Link Type
  • Hover Effects
  • Icon [Enable/Disable]
  • Button Size
  • Button Alignment
  • onClick Event

Button

  • Text: Enter button text in the text box that will be displayed on the button e.g. Click Me.
  • Link Type: Add button’s link whether if it was a custom URL or you can add an existing page link.
  • Link: Enter the URL in the text box.
    • Check “Open in New Window” box if you want the link to be opened in a new tab.
    • Check “Add Nofollow” if you don’t want your page to be indexed by search engines.
  • Hover Effect: Choose the hover effect for the button. You can choose from the following options:
    • None
    • Slide
      • Top to Bottom
      • Bottom to Top
      • Right to Left
      • Left to Right
    • Shutter
      • Shutter in Horizontal
      • Shutter in Vertical
      • Shutter out Horizontal
      • Shutter out Vertical
      • Scaled Shutter Vertical
      • Scaled Shutter Horizontal
      • Tilted Left
      • Tilted Right
    • Icon Fade
    • Icon Slide
      • Top
      • Bottom
      • Left
      • Right
    • In & Out
      • Radial In
      • Radial Out
      • Rectangle In
      • Rectangle Out
    • Grow
      • Detect Mouse Position: Enable this option to trigger the grow effect from the mouse position on the button.
  • Icon: [Enable/Disable Icon Option]
    • Icon: Choose from a list of Font Awesome icons or Lottie Animation icon.
    • Icon Position: Set the icon position, before or after the button text.
    • Icon Size: Set the size of the icon, you can drag the bar to set the icon size or enter the value.
    • Icon Spacing: Set the space between the icon and the text, you can drag the bar to set the icon space or enter the value.
  • Size: Set the size of the button. You can choose between small, medium, large and block.
  • Alignment: Set the button alignment, you can set as the center, left or right.
  • onClick Event: Use this option if you want to add custom functionality to the button. You can add the javascript or jquery code in the text box.
Premium Button Widget for Elementor
Elementor Button Widget Main Settings

Style

Button

  • Typography: Set the typography of the text in the button. There are a lot of options in the typography box, you can select the font family, adjust the size of the text and font-weight. You can select from different text transform options available and can also set the style of the text. Adjust the line height and letter spacing by dragging the bar or entering the value.
  • There are two tabs, normal and hover. You can click on these tabs to adjust the styling of the button.
  • Text Color: Select a color for the button text.
  • Icon Color: Set the color of the icon.
  • Background Color: Set the background color of the button.
  • Border Radius: Increasing the border-radius will add circular corners to the button container. You can adjust the border-radius in pixels, % or em.
  • Advanced Border Radius: Apply custom radius values for Elementor button widget. Get the radius value from here.
  • Border Radius: Insert border radius values.
  • Icon Shadow, Button Shadow & Text Shadow: Add a shadow around the icon, button, and text. Adjust the shadow using the following settings:
    • Horizontal Position
    • Vertical Position
    • Blur
    • Spread
    • Position: Outline or Inset
  • Margin: Margin is the space between the button container and the rest of the content. Adjust the margins in pixels, em or %.
  • Padding: Padding is the space between the button text and the edge of the buttons container. Increasing the padding will make the button larger. Adjust the padding using pixels, em or %.
Elementor Button Widget Button Style
Elementor Button Widget Button Style

Related Docs:

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.

×