Button Widget: Settings Overview

Updated on January 11, 2024 by Ananda
Table Of Content

Are you looking to add eye-catching and engaging buttons on your Elementor website? With the Button widget from The Plus Addons for Elementor, you can easily add a variety of stylish and attention-grabbing call-to-action buttons to your Elementor website.

Required Setup

Learn via Video Tutorial:

How to Activate the Button Widget?

Go to 

  • The Plus Settings Plus widgets 
  • Search the widget name and turn on the toggle then click Save.
Button active

Key Features

  • Multiple button styles – You can choose from multiple unique pre-designed styles to the free Elementor button.
  • Change button text on hover – With some button styles, you can change button text on hover. 

How to Use the Button Widget?

Add the Button widget to the page. 

Content

From the Button Style dropdown, you can select a button style.

Button content

In the Text field, you have to add the button text. 

On some button styles, you’ll see a Hover Text field to show a different text on hover.

For the Style 23 button, you can add an extra text on the button, like this –

Button multi line text demo

Then, in the Link field, you can add a link for the button.

You can add a custom attribute to the button by enabling the Add Custom Attributes toggle.

Layout

From the Alignment section, you can align the button.

Icon Settings

From the Icon Font dropdown, you can add an icon to the button.

From here you can manage the icon position, spacing, size and alignment as well.

Extra

In the Button ID field, you can add an ID to the button, which can be used to directly redirect visitors to the button or it can be used in JavaScript to add custom interactivity. 

How to Style the Button Widget?

You can style the Button from the Style tab.

Typography and Cosmetics – From here, you can manage the button padding, margin, typography, color, icon size etc.

Button style

Special – Here you’ll find some options to add special effects to the button for free. 

On Scroll View Animation –  This is our global extension available for all our widget, this adds scrolling animation as the widget comes in viewport. You can learn more about this from here.

Advanced options remain common for all our widget, you can explore all it options from here.

View Advanced tab tutorial.

Read more, how to add post next & previous button in elementor blog post.

OR
Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]

    Subscribe to our YouTube Channel for Elementor Tutorials
    New Video Every Week!
    Automatically Convert Figma Designs to 100% Editable Elementor Website
    X