help center

On this page

Button Widget

Last Update: February 4, 2024

Add the widget

button widget icon

To access and use a widget:

  1. In Elementor Editor, click +.
    All available widgets are displayed.

  2. Click or drag the widget to the canvas. For more information, see Add elements to a page.

What is the Button widget?

Buttons on a website are crucial in guiding user actions, providing clear calls to action, and enhancing overall user engagement. The Button widget lets you add interactive and visually appealing buttons on your site.

The Button widget offers a range of customization options, enabling you to easily control the button’s appearance, behavior, and link destinations.

Common use case

Sara manages the website of a popular magazine, where they publish daily blogs to attract new visitors. They place a Button widget to create a clear and engaging Subscribe Now button. This button is strategically placed at the end of each article, encouraging readers to subscribe to the newsletter for updates.

button widget example

Additional use cases 

  • Websites offering free trials can use a prominent Start Your Free Trial button directing users to the registration page.
  • Blog platforms can include social media buttons (e.g., Facebook, Twitter) at the end of each post.
  • Software companies may utilize a Download Now button on the product page for software downloads.

Add a Button widget: Step-by-step

  1. Add the Button widget to the canvas. For details, see Add elements to a page.
    choose button type
  2. In the Content tab, under the Button section, use the Type option to select from five design styles: Default, Info, Success, Warning, or Danger.
    enter button Button Widget 4
  3. In the Text field, enter the button’s text.
    link field Button Widget 6
  4. In the Link field, add the URL for the button’s link.
    link options Button Widget 8
    1. Click the ⚙️ to set the link to either Open in a new window or to Add nofollow to the link.
      button libk alimgment Button Widget 10
  5. In the Alignment field, set the alignment so the button will appear on the widget’s left edge, right edge, or center.
    size Button Widget 12
  6. In the Size field, select the button sizes, from Extra Small to Extra Large.
    button icon
  7. (Optional) In the Icon field, add the button icon:
    1. Click the SVG button  svg icon Button Widget 15 to add an uploaded SVG image as a button icon. For more details, see Enable SVG Support in Elementor.
    2. Click the Icon button dot icon Button Widget 17 to add an icon from the icon library.
      icon position
  8. In the Icon Position field, set the icon to appear before or after the button text.
    icon spacing Button Widget 20
  9. In the Icon Spacing field, define the amount of space between the icon and the button text.
    button id Button Widget 22
  10. (Optional) In the Button ID field, assign a unique button ID for specific situations, such as Google Analytics events, Meta Pixel, and more.

Actions you can perform with Button

Settings for the Button Widget

You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.

content tab of the button widget 1 Button Widget 24

Choose from five button styles: Default, Info, Success, Warning, or Danger.

Enter the text you want on the button.

Set the URL for the button’s link. Click the Settings icon ⚙️ to select:

  • Open in new window to open the link in a separate window. This keeps the user on your site even after they click the button.
  • Add nofollow prevents search engines from associating your site with the linked site. This can help prevent your site from being associated with bad actors, lowering your SEO score.

Align the button to the left, center, right, or justified in relation to its column.

Define the size of the button. Choose size options ranging from extra small to extra large.

Choose a FontAwesome icon to display on the button.

Set whether the icon should appear before or after the button text.

 

Use the slider to adjust the space between the icon and the button text.

(Optional) Assign a unique button ID, which is helpful for situations like Google Analytics events.

style tab of the button widget Button Widget 26

Choose the font style and size for the text on the button. For more details, see Typography.

Add a shadow and blur effect to the text on the button. For more details, see Shadow, Text Shadow and Boxed Shadow.

Determine how the button appears by default.

  • Text Color: Set the color of the button’s text.
  • Background Color: Add a background color to the button. For more details, see Create a Background.

Determine how the button appears when moused over.

  • Text Color: Decide the color of the text on the button when the mouse is over it.
  • Background Color: Give the button a different color in the background when you hover over it.
  • Hover Animation: Displays an animation to occur when the mouse is over the button.

Choose the border type to use around the button. For more details, see Border type.

Set the thickness of the border around the button.

Set the color of the button. For more details, see Choose a color or Use global fonts and colors.

Set the border radius to control corner roundness. For more details, check out Border radius tools.

Set to apply a box shadow on the button. Learn more about shadows.

Adjust the space between the text and the edges of the button. Learn how to create space with padding and margins.

advanced tab button Button Widget 28

To learn more about advanced settings, see Advanced Tab.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article