---
title: "Button Widget: Settings Overview"
url: https://theplusaddons.com/docs/button-widget-settings-overview/
date: 2024-01-09
modified: 2026-09-11
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2024/01/Button-Widget_-Settings-Overview-1024x536.jpg
word_count: 1046
---

# Button Widget: Settings Overview

## 

- The Plus Addons for Elementor Button widget offers 23 pre-designed styles in the free plugin, and Style 4, Style 11, and Style 14 change button text on hover.
- Button Widget settings include Button Tag Text for Style 23, Hover Text for Style 4, Style 11, and Style 14, and a Button ID field that can redirect visitors directly to the button or support JavaScript interactivity.
- Icon Settings let the widget use FontAwesome, FontAwesome 5, or Icons Mind icons, with icon position before or after the button text and responsive controls for icon spacing and icon size.
- Style tab options add free effects such as Magic Scroll, Tooltip, Special Effect, Mouse Move Parallax, Continuous Animation, Full-Width Button, Button Hover Effects, and Interval Shake Animate.

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.

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/free-elementor-buttons/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Required Setup

- [Elementor FREE Plugin](http://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor](http://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) plugin installed and activated.

- Make sure the Button widget is activated, to verify this visit The Plus Addons → Widgets → and Search for Button and activate.

## Learn via Video Tutorial:

https://www.youtube.com/watch?v=cuxzApRULv8

## How to Activate the Button Widget?

Go to 

- **The Plus Addons **→** Widgets **

- **Search **the widget name** **and** turn on the toggle.**

![Enabling the Button widget under ThePlus Settings in the WordPress admin](https://theplusaddons.com/wp-content/uploads/2024/01/Tpae-Button-Activate.png)

## Key Features

- **Multiple button styles **- You can choose from **23** pre-designed styles for the Elementor button, all available in the free plugin.

- **Change button text on hover** - With Style 4, Style 11 and Style 14 you can change the button text on hover.

## How to Use the Button Widget?

Add the Button widget to the page. 

### Layout

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

![The Button widget Layout section in the Elementor panel, showing Button Style, Alignment, Text and Link](https://theplusaddons.com/wp-content/uploads/2024/01/Tpae-Button-Layout-1.gif)

From the **Alignment** section, you can align the button for the responsive device.

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

On **Style 4**, **Style 11** and **Style 14** you’ll see a **Hover Text** field to show different text on hover. It is hidden on the other 20 styles.

For the **Style 23** button, you can add an extra text on the button from the **Button Tag Text** section, like this -

![Button Multi Line Text Demo](https://theplusaddons.com/wp-content/uploads/2024/01/button-multiline-text-demo.png)

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** group control.

### Icon Settings

From the **Icon Font** dropdown, you can select and add an icon to the button based on the chosen Icon Type. Here you’ll find three options:

![The Icon Settings section of the Button widget in the Elementor panel](https://theplusaddons.com/wp-content/uploads/2024/01/Tpae-Button-Icon-Settings.gif)

- **FontAwesome** – To add classic icons, from the FontAwesome icon library.

- **FontAwesome 5** – To add modern icons, from the FontAwesome 5 collection.

- **Icons Mind** –To add clean and minimal icons, from the Icons Mind library.

Based on your selection, you’ll find different group controls for an Icon Type.

From the **Icon Position** section, you can set the icon position either before or after the button text.

From the **Icon Spacing **section, you can set the space between the icon and the content for responsive devices.

From the **Icon Size **section, you can set the icon for responsive devices.

From the **Alignment **section, you can align the content to the top, center, or bottom for responsive devices to the button.

### Extra Option

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. 

![The Button ID field in the Extra Option section of the Button widget](https://theplusaddons.com/wp-content/uploads/2026/09/tpae-the-button-id-field-in-the-extra-option-section-of-the-button-widget.webp)

## How to Style the Button Widget?

You can style the Button from the Style tab.

**Background Option** - From here, you can manage the button padding, margin, typography, color, icon size, etc.

![The Background Option section on the Style tab of the Button widget](https://theplusaddons.com/wp-content/uploads/2026/09/tpae-the-background-option-section-on-the-style-tab-of-the-button-widget.webp)

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

- **Magic Scroll** - From here, you can add a [magic scroll effect to the button.](https://theplusaddons.com/plus-extras/on-scroll-magic-elementor-parallax/)

- **Tooltip** - From here, you can add a [tooltip to the button.](https://theplusaddons.com/docs/tooltip-text-in-button-elementor/)

- **Special Effect** - From here, you can add an [overlay effect to the button.](https://theplusaddons.com/elementor-extras/global-mouse-hover-parallax/)

- **Mouse Move Parallax** - From here, you can add a [mouse move parallax effect to the button](https://theplusaddons.com/elementor-extras/global-mouse-hover-parallax/).

- **Continuous Animation** - From here, you can add a [continuous animation to the button](https://theplusaddons.com/docs/continuous-animation-in-button-elementor/).

- **Full-Width Button** - From here, you can make a [full-width button.](https://theplusaddons.com/docs/full-width-button-in-elementor/)

- **Button Hover Effects** - From here, you can add a [button hover effect.](https://theplusaddons.com/docs/button-text-on-hover-in-elementor/)

- **Interval Shake Animate** - From here, you can add an [interval shake animation to a button.](https://theplusaddons.com/docs/interval-shake-animation-in-button-elementor/)

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

Advanced options remain common for all our widgets; you can explore all their options from here.

[View Advanced tab tutorial.](http://docs.posimyth.com/tpae/advanced-tab/)

Read more about [how to add post next & previous button in elementor blog post](https://theplusaddons.com/docs/add-post-next-previous-button-in-elementor-blog-post/).

## Advanced Tab: Tooltip and Continuous Animation

Two Button features live on the **Advanced** tab rather than Content or Style, and they are easy to miss because their toggles sit somewhere else in the free plugin.

| Feature | Free | Pro |
| ------- | ---- | --- |
| Tooltip | Toggle only, under **Style > Special**. Switching it on shows a Pro notice. | Full section at **Advanced > Tooltip** — content type, description, alignment, colour, position, trigger, theme, arrow, animation, timings and styling. |
| Continuous Animation | Toggle only, under **Style > Special**. Switching it on shows a Pro notice. | Full section at **Advanced > Continuous Animation** — Animation Effect, Hover Animation, Duration Time and Transform Origin. |

Step-by-step guides: [add tooltip text to a button](https://theplusaddons.com/docs/tooltip-text-in-button-elementor/) and [add continuous animation to a button](https://theplusaddons.com/docs/continuous-animation-in-button-elementor/).

## Complete Settings Reference

Every control in the Button widget, by where you find it.

### Content > Layout

| Setting | Type | Default | Notes |
| ------- | ---- | ------- | ----- |
| Button Type | Choose | Basic | Basic uses the Style tab; Global uses a predefined button style. |
| Button Style | Select | Style 1 | 23 styles. Keys run style-1 to style-22, then style-24, which is labelled Style 23. |
| Alignment | Choose, responsive | Not set | Separate desktop, tablet and mobile values. |
| Text | Text | Read More | The resting label. |
| Button Tag Text | Text | Click Here | Style 23 only. |
| Hover Text | Text | Click Here | Style 4, 11 and 14 only. |
| Link | URL | # | Destination for the button. |
| Add Custom Attributes | Popover | — | Custom HTML attributes on the button element. |

### Style > Special

| Setting | Type | Default | Notes |
| ------- | ---- | ------- | ----- |
| Magic Scroll | Switcher | No | Pro for the options. |
| Special Effect | Switcher | No | Pro for the options. |
| Mouse Move Parallax | Switcher | No | Pro for the options. |
| Full-Width Button | Switcher | No | Free. Makes the button fill its container. |
| Button Hover Effects | Select | Select Hover Effect | Free. Grow, Push, Bounce In, Float, Wobble Horizontal, Wobble Vertical, Float Shadow, Grow Shadow, Shadow Radial. |
| Shadow Color | Colour | Not set | Float Shadow, Grow Shadow and Shadow Radial only. |
| Interval Shake Animate | Switcher | No | Free. |
| Interval Shake Duration | Number, seconds | 5 | Appears once the shake toggle is on. |

### Advanced > Continuous Animation (Pro)

| Setting | Type | Default |
| ------- | ---- | ------- |
| Continuous Animation | Switcher | Off |
| Animation Effect | Select — Pulse, Floating, Tossing, Rotating | Pulse |
| Hover Animation | Switcher | Off |
| Duration Time | Slider, seconds | 2.5 |
| Transform Origin | Select, 9 positions | Center Center |

### Advanced > Tooltip (Pro)

| Setting | Inner tab | Options | Default |
| ------- | --------- | ------- | ------- |
| Tooltip | — | On / Off | Off |
| Content Type | Content | Text Content, WYSIWYG Editor | Text Content |
| Description | Content | Plain text | Placeholder text |
| Text Alignment | Content | Left, Center, Right | Center |
| Text Color | Content | Colour | Not set |
| Position | Style | Left, Right, Top, Top Start, Top End, Bottom | Top |
| Trigger | Style | Hover, Click | Hover |
| Theme | Style | Dark, Light, Translucent | Dark |
| Arrows | Style | None, Default, Round | Default |
| Animation | Style | Shift-Away, Shift-Toward, Fade, Scale, Perspective | Shift-Toward |
| Duration In / Out | Style | Milliseconds | 250 / 200 |
| Interactive | Style | On / Off | On |

## Task Guides

- [Create a full-width button in Elementor](https://theplusaddons.com/docs/full-width-button-in-elementor/)- [Change button text on hover in Elementor](https://theplusaddons.com/docs/button-text-on-hover-in-elementor/)- [Add a button hover animation in Elementor](https://theplusaddons.com/docs/button-hover-animation-in-elementor/)- [Add an interval shake animation to a button](https://theplusaddons.com/docs/interval-shake-animation-in-button-elementor/)- [Add tooltip text to an Elementor button](https://theplusaddons.com/docs/tooltip-text-in-button-elementor/)- [Add continuous animation to an Elementor button](https://theplusaddons.com/docs/continuous-animation-in-button-elementor/)

## Frequently Asked Questions

**Q: Why isn’t the Button widget showing in Elementor?**
A: The Button widget has to be activated inside The Plus Addons for Elementor before it appears in the editor. The page says to go to The Plus Addons → Widgets, search for Button, and turn on the toggle. That matters because the widget is part of the plugin’s free set, which includes 23 pre-designed button styles. If it still does not show up, the setup also depends on Elementor FREE being installed and activated.

**Q: What can I do with the Button widget besides a basic link button?**
A: The Button widget is built for more than a plain call-to-action. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides 23 pre-designed styles, hover text on Style 4, Style 11, and Style 14, icon placement before or after the text, custom attributes, and special effects like tooltip, overlay, mouse move parallax, continuous animation, full-width behavior, hover effects, and interval shake. That makes it useful when a standard Elementor button feels too flat.

**Q: How do I make a button text change on hover in Elementor?**
A: Hover text is built into only three styles: Style 4, Style 11, and Style 14. The page notes that the Hover Text field appears there and stays hidden on the other 20 styles. That means the style choice controls whether hover-copy is even available. If you want a button that changes its message on hover without extra code, pick one of those styles instead of trying to force it onto another layout.

**Q: What’s the best button style if I want extra text inside the button?**
A: Style 23 is the one that supports extra text through the Button Tag Text section. The page separates that from normal button text, so it is meant for cases where you want a secondary label inside the same button rather than replacing the main CTA. That is useful when you need more context in a compact space. For other styles, that extra tag text option does not appear.

**Q: How do I add an icon to a button in Elementor?**
A: The icon setup is handled in Icon Settings through the Icon Font dropdown. The widget supports three icon sources: FontAwesome for classic icons, FontAwesome 5 for modern icons, and Icons Mind for clean minimal icons. You can also place the icon before or after the text and control spacing and size for responsive devices. That makes icon buttons easier to tune across desktop and mobile without rebuilding the design.

**Q: What’s better for advanced effects: Style tab options or Pro features?**
A: The free Special options cover effects like Magic Scroll, Special Effect overlay, Mouse Move Parallax, Full-Width Button, Button Hover Effects, and Interval Shake Animate. Tooltip and Continuous Animation are different because they live under Advanced and are marked Pro in this page’s settings reference. If you only need visual polish like hover states or width control, free options are enough. If you need tooltip content or motion controls like Animation Effect and Duration Time, those are Pro-only features.