Button Widget Tutorial

Intro

Welcome to this straightforward guide on utilizing the Elementor button widget—a versatile tool for your website design arsenal. In this tutorial, we’ll walk through the essentials of creating an interactive button, from adding text and links to customizing hover effects and alignment. By the end, you’ll be equipped to enhance your site’s user experience with buttons that not only look great but function seamlessly.

Elementor Button widget

Click here to check Premium Button Widget demo.

Requirements:

  • You will need Premium Addons PRO plugin installed and activated on your website.
  • Also, make sure that this addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
  • 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.
  • Text: The label or title on the button.
  • Link Type: Choose the type of link the button will use options likely include URL, section link, email, etc.
  • Link: The actual URL or identifier where the button will direct the user when clicked.
  • Hover Effect: Choose the hover effect for the button. You can choose from the following options:
    • NoneSlide
      • Top to BottomBottom to TopRight to LeftLeft to Right
      Shutter
      • Shutter in HorizontalShutter in VerticalShutter out HorizontalShutter out VerticalScaled Shutter VerticalScaled Shutter HorizontalTilted LeftTilted 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.
    • Doble Layers
      • Bottom to Top
      • Top to Bottom
      • Left to Right
      • Right to Left
    • Animated Underline: You can select between 7 different underline styles.
      • Line Height (PX): Specify the thickness of the underline in pixels (PX).
      • Line Vertical Position (%): Adjust the vertical position of the underline as a percentage relative to the button text.
Elementor Premium Button's content button options
Elementor Premium Button – Content Button Options
  • Icon: [Enable/Disable Icon Option]
    • Icon: Choose from a list of Font Awesome icons or Lottie Animation icons.
    • 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 it in 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.
Elementor Button Widget Main Settings

Style

Button

  • Typography: Set the typography of the text in 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.
Elementor Button Widget Button Style
Elementor Button Widget Button Style

Conclusion

Elementor Button Widget lets you create simple, good-looking buttons that do what you want. You can add text, pick an icon, and choose colors that fit your website. Make your button pop when someone hovers over it with cool effects. You can even make the button do special things when clicked by adding your code. With easy adjustments for size and placement, your button will fit right in where you need it. It’s a straightforward tool for making buttons that feel like part of your site.


If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our Facebook group and YouTube channel to get updates about new features, improvements, and bug fixes.

Related Docs:

Download Now it's free!

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

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.