Classic Elementor widget · Free
The Elementor button widget with the hover effect built in. Pick one of eight styles: a 3D text flip, a fill that starts where the pointer enters, icons that slide in, a sliding fill or an outline ring. Set your text, icon and link, then match your colours. Free, on Elementor Free.
The short answer
Advanced Button is a free Elementor widget from Animation Addons that adds an animated call-to-action button. You choose one of eight styles, each with its own hover effect, then set the text, the icon and its position, the link, and the colours, background and border for the normal and hover states. It is an Elementor animated button that needs no code.
It is a classic widget, built for the Elementor 3 editor, and it keeps working in Elementor 4 alongside atomic elements. Your links stay real links, so search engines and screen readers read them like any other.
Use it as a free Elementor button addon for any Elementor call to action button: a hero link, a booking button, a pricing plan or a contact form.
Also searched as: elementor button, elementor button widget, elementor button hover effect, elementor animated button, elementor button animation, free elementor button addon, elementor button with icon, elementor button gradient background, elementor button open in new tab, how to add a button in elementor, elementor 3d flip text button, elementor call to action button, elementor button styles, elementor button hover color.
Live demos
Eight Elementor button hover effect examples, one per style, on small sites for a fashion label, an interior studio, an agency and a film studio. Hover a button, or tab to it with the keyboard.
Soft tailoring for colder days
Twelve looks in wool, linen and washed cotton, made in small runs in Porto.
Two text links under a lookbook intro. On hover the arrow slips out to the top right and a new one slides in from the bottom left.
Hover a linkSet Style to 1, Text to View lookbook and Border Width to 1 px. The second link only has its own Color.
A calm home, planned room by room
A two-hour visit, a written brief and a first mood board within ten days.
Two outlined buttons on a studio services page. On hover a solid shadow appears at the bottom right, so the button looks lifted.
Hover the buttonsSet Style to 2, add a solid Border Type, and under Hover add a Box Shadow with no blur and a 7 px offset.
Brands, sites and launch campaigns
Strategy, identity and Elementor builds for teams that want to move fast and look sharp.
Two buttons in a services section. On hover the text flips over in 3D and the same words roll in from below, like a split-flap sign.
Hover the buttonsSet Style to 3, Border Radius to 0 30 0 30, and pick a Color for the Normal and Hover states.
Have a project in mind?
Tell us what you are building. We reply within one working day.
Two round buttons on a contact band. A colour fill grows from the exact point where the pointer enters, and an arrowhead shows on the line.
Hover from different sidesSet Style to 4. The arrow comes with this style, so Icon is hidden. Choose the fill under Hover, in Background Type.
Malepère: a 300-year-old estate, online
A new identity and an online shop that tripled direct sales in one season.
Two pill buttons under a wine case study. On hover the right icon shrinks away and a new icon grows in on the left.
Hover the buttonsSet Style to 5, Icon Width to 54 px and Border Radius to 30 px.
Light layers for long evenings
Shirts, trousers and dresses in washed European linen.
Two pill buttons on a linen collection banner. On hover the left icon slides away and the icon on the right grows in.
Hover the buttonsSet Style to 6, Icon Width to 54 px and Gap to 0.
The Long Light, a short film
Twenty-two minutes on the last ferry of the season. Premieres on 6 November.
A filled pill inside an outline ring on a film page. On hover the fill pulls up out of sight and leaves the outline and a thin bar on top.
Hover the buttonsSet Style to 7 and Outline Gap to 6 px. Use a light grey Border Type for the ring.
Let’s plan your space
The studio is open Monday to Friday, 9 to 6, at 14 Rue des Arts.
Two outlined pills on a studio contact page. On hover a colour fill slides in from the right with a small bounce.
Hover the buttonsSet Style to 8, Border Radius to 35 px and the hover Color to white.
Features
Every item below is a real setting in the widget panel. No CSS, no custom code.
Pick a Style from 1 to 8 and the hover animation is ready: icon swap, offset shadow, 3D flip, pointer fill, sliding icons, outline ring or sliding fill. These are the Elementor button styles of this widget.
Write your own Text, choose an Icon from the Elementor library or your own SVG, and set its size and gap. That makes an Elementor button with icon.
Use Icon Position to put the icon after or before the text, for back links, downloads and next steps.
The Link field opens in a new tab, adds nofollow or custom attributes, and links to any page, anchor, email or phone number. Elementor button open in new tab is one click.
Set a solid colour or a gradient Background Type for both the normal and the hover state. That gives you an Elementor button gradient background with its own hover colour.
Style 7 adds an Outline Gap between the fill and the outer ring, for a refined double-border look.
Style 2 adds a Box Shadow on hover, the hard offset shadow of the Elementor button hover effect in the first row of demos.
Typography, border, border radius, padding, icon width and alignment, each responsive, so the button fits your design on every screen. Set the Elementor button hover color for the text and the border as well.
Step by step
Five steps, no code. The bold names are the labels in the Elementor panel.
Install and activate Animation Addons for Elementor from WordPress.org.
Open your page in Elementor, search the panel for Advanced Button and drag it onto the page. That is how to add a button in Elementor with hover animation.
Choose a Style from 1 to 8, then write the Text and pick an Icon and Icon Position.
Add the Link, and set it to open in a new tab or add nofollow if you need to.
In the Style tab, set the colours and background for Normal and Hover, check it on mobile and publish.
Honest comparison
Elementor's own Button is a good plain button. The Advanced Button adds designed hover effects that move parts of the button, not just the whole thing.
| Feature | Advanced Button (Animation Addons) | Button (Elementor) |
|---|---|---|
| Plan | Free | Free |
| Ready-made designs | 8 styles | One button you style yourself |
| Hover effects | Effects inside the button: 3D text flip, pointer fill, sliding fill, icon swap | Hover Animation moves the whole button: grow, pulse, float and more |
| Animated icon on hover | Styles 1, 5 and 6 | No |
| Outline ring with a gap | Style 7, Outline Gap | No |
| Gradient background, normal and hover | Yes | Yes |
| Icon before or after the text | Yes | Yes |
Compared with Elementor 3 and 4 and Animation Addons for Elementor, October 2026.
FAQ
Without any code: drag the free Advanced Button from Animation Addons onto your page and choose a Style from 1 to 8. Each style has its hover animation built in, so you only set the text, icon, link and colours. No CSS is needed.
Style 1 swaps the icon diagonally, style 2 adds an offset shadow, style 3 is an Elementor 3d flip text button that turns the text in 3D, style 4 grows a fill from the pointer, styles 5 and 6 slide round icons in and out, style 7 lifts the fill out of an outline ring, and style 8 slides a colour fill across. Together they are eight Elementor button styles.
Use the Advanced Button. Pick a style, and the Elementor button animation runs on hover with no keyframes or CSS to write. For other motion, the Pro Animation tab can add an entrance effect to the same button.
Yes. Pick the Icon, then set Icon Position to Before. Styles 5 and 6 always show round icons on both sides, and style 4 uses a drawn line with an arrowhead instead of an icon.
Yes. The Background Type control in the Style tab takes a solid colour or a gradient, and you can set a different one for the hover state, so you can make an Elementor button with a gradient background.
Yes. The Link field has Open in new window, Add nofollow and Custom Attributes, the same options as other Elementor links.
In the Style tab, set Color and Border Color under Normal, then set them again under Hover. The Elementor button hover color changes the text, the fill and the border.
It is a free Elementor button addon in the Animation Addons plugin on WordPress.org, and it works with Elementor Free. Elementor Pro is optional.
Yes. It is a classic widget, so Elementor 4 lists it with the legacy widgets and it works on the same page as atomic elements.
The button shows its normal design and works as a normal link on the first tap. The hover effect is extra polish for mouse and keyboard users, so nothing important is hidden behind it.
Pairs well with
Classic widgets that work well with the Advanced Button on the same page. See all 102 widgets.
Animation Addons Pro · Elementor 4
Eight animated hover effects for your calls to action, free on Elementor Free.
Halloween deal40% off every Pro planEnds 5 Nov
