Button Widget: Settings Overview

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.

Required Setup

• Elementor FREE Plugin installed & activated.
• You need to have The Plus Addons for Elementor 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:

How to Activate the Button Widget?

Go to 

• The Plus Addons → Widgets 
• Search the widget name and turn on the toggle.

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.

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 –

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:

• 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. 

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.

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.
• Tooltip – From here, you can add a tooltip to the button.
• Special Effect – From here, you can add an overlay effect to the button.
• Mouse Move Parallax – From here, you can add a mouse move parallax effect to the button.
• Continuous Animation – From here, you can add a continuous animation to the button.
• Full-Width Button – From here, you can make a full-width button.
• Button Hover Effects – From here, you can add a button hover effect.
• Interval Shake Animate – From here, you can add an interval shake animation to a button.

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.

Read more about how to 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 and add continuous animation to a button.

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
• Change button text on hover in Elementor
• Add a button hover animation in Elementor
• Add an interval shake animation to a button
• Add tooltip text to an Elementor button
• Add continuous animation to an Elementor button