---
title: Advance Button
description: "Design premium, attention-grabbing buttons using the Advanced Button widget. It includes enhanced styling features like dual text, icon effects, hover transitions, shape control, and custom animations.. [Advanced Button Widget for Elementor | Easy Elements](https://www.youtube.com/embed/54hBDJgDf9o?feature=oembed&enablejsapi=1) ## How to Use Advance Button…"
url: "https://wpeasyelements.com/docs/advance-button/"
updated: "2025-12-31"
category: General Widgets
---

# Advance Button

Design premium, attention-grabbing buttons using the Advanced Button widget. It includes enhanced styling features like dual text, icon effects, hover transitions, shape control, and custom animations..

[Advanced Button Widget for Elementor | Easy Elements](https://www.youtube.com/embed/54hBDJgDf9o?feature=oembed&enablejsapi=1)

## How to Use Advance Button Widget of Easy Elements Pro

### Step 1:

#### Add Advance Button Widget:[https://happyaddons.com/docs/happy-addons-for-elementor-pro/happy-effects-pro/advanced-heading/#step-1](https://happyaddons.com/docs/happy-addons-for-elementor-pro/happy-effects-pro/advanced-heading/#step-1)

Select the Advance Button widget from the left panel, then drag and drop it into your desired area on the canvas.

![](https://wpeasyelements.com/wp-content/uploads/2025/10/image-9.png)

#### Advance Button Features & Settings:

Configure every aspect of your advanced button including button types, button type style, icon settings, and more settings.

1. ****Button Type****
2. **Button Type Style**
3. **Button Text**
4. ****Button Url****
5. ****Button Icon****
6. **Icon Position**
7. **Icon Spacing**

![](https://wpeasyelements.com/wp-content/uploads/2025/10/image-10.png)

#### Customize Button Style:

Easily customize your widget’s appearance including size, color, background, spacing, and more—all from the Style panel.

1. **Button **Size****, **Color, Background, Gradient Background, Width, Height etc.**
2. ****Button Hover Color, Background, Gradient Background etc.****
3. ****Button**Icon Normal Style**
4. ****Button Icon Hover Style****

![](https://wpeasyelements.com/wp-content/uploads/2025/10/image-11.png)

### Step 2:

#### Discover each styling option in detail in the sections below.

##### Default Style:

![](http://wpeasyelements.com/wp-content/uploads/2025/10/ab-default.gif)

##### Sticky Style:

![](http://wpeasyelements.com/wp-content/uploads/2025/10/ab-sticky.gif)

##### Button with Badge:

![](http://wpeasyelements.com/wp-content/uploads/2025/10/ab-badge.gif)

##### Magnetic Style:

![](http://wpeasyelements.com/wp-content/uploads/2025/10/ab-magnetic.gif)