---
title: "Button Widget: Settings Overview"
url: https://theplusaddons.com/docs/button-widget-settings-overview/
date: 2024-01-09
modified: 2026-09-28
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: 1070
---

# 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 support hover text changes.
- Button Widget settings include FontAwesome, FontAwesome 5, and Icons Mind icon libraries, plus icon position before or after the text and responsive icon spacing and size controls.
- 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.
- Advanced tab controls separate Tooltip and Continuous Animation features from the main settings, with Tooltip offering content type, position, trigger, theme, arrows, animation, and timings.

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.

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.***

[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 is my Button widget not showing in Elementor?**
A: The Button widget only works after both plugins are active: Elementor FREE and The Plus Addons for Elementor. The usual miss is leaving the widget disabled inside The Plus Addons → Widgets, so it never appears in the editor. POSIMYTH’s Button widget also has to be turned on there before you can use the 23 pre-designed styles and the other controls.

**Q: What button styles can I use without the Pro version?**
A: The free Button widget includes 23 pre-designed styles, which is enough for most basic CTA layouts. A useful detail is that Style 4, Style 11, and Style 14 support hover text, while Style 23 adds a separate Button Tag Text field. That makes the free version more flexible than a plain text button, especially when you want a second label or a hover-state message.

**Q: How do I make a button fill its container in Elementor?**
A: The full-width behavior is handled in Style > Special with the Full-Width Button option. That matters when you want a button to read like a block-level CTA instead of a small inline element, especially on mobile layouts where narrow buttons can look awkward. The Plus Addons for Elementor includes this as part of the free special effects set.

**Q: Can I add icons to an Elementor button and control where they appear?**
A: The Button widget supports icons through the Icon Font dropdown, with FontAwesome, FontAwesome 5, and Icons Mind available. Icon Position lets you place the icon before or after the text, and Icon Spacing plus Icon Size are responsive controls. That combination is useful when the icon should support the label instead of competing with it.

**Q: What’s the difference between tooltip and continuous animation in the Button widget?**
A: Tooltip and Continuous Animation are both Pro features, but they solve different problems. Tooltip adds extra contextual text on hover or click, while Continuous Animation adds motion effects like Pulse, Floating, Tossing, or Rotating. In The Plus Addons for Elementor, both are toggled from Style > Special first, then configured in their own Advanced sections.

**Q: What settings matter most when styling a button in The Plus Addons for Elementor?**
A: The main styling work happens in Style > Special and the Advanced tabs. Style > Special covers effects like Magic Scroll, overlay-style Special Effect, Mouse Move Parallax, Button Hover Effects, Interval Shake Animate, and Full-Width Button. Advanced adds finer control for Pro features such as Tooltip timing and Continuous Animation duration, so it’s where you tune behavior after choosing the base look.