Atomic Element · Pro
Button Pro gives your Elementor 4 calls to action eight finished hover styles, including a GSAP ripple with a sliding arrow and an icon that swaps places on hover. Pick a style, keep your brand Classes, write no code.
The short answer
Button Pro brings Elementor animated button hover effects to a native Elementor 4 Atomic Element, from Animation Addons for Elementor. Choose one of eight hover styles: ripple, text flip, border divide, group swap (left or right), shadow, outline pill and slide fill. The ripple runs on GSAP; you style everything with Elementor 4 Classes.
Many "Elementor V4 compatible" addons are classic v3 widgets. Button Pro is a native Atomic Element, styled from the unified Style tab with Classes and Variables.
| Plan | Pro Animation Addons Pro |
|---|---|
| Element type | Native Elementor 4 Atomic Element |
| Works with | Elementor Free and Elementor Pro, Atomic Editor on |
| Hover styles | 8: Ripple, Text Flip, Border Divide, Group Swap Left, Group Swap Right, Shadow, Outline Pill, Slide Fill |
| How you pick a style | Apply Preset, with Reset to Default to undo |
| Animation engine | GSAP for the ripple; CSS transitions for the other styles |
| Only in Pro (not in the free Button) | Ripple, Group Swap Left and Right, Shadow |
| Requires | Animation Addons for Elementor + Animation Addons Pro |
| Plugin version | Animation Addons for Elementor 4.3 · Last updated October 2026 |
Demo variations
Every demo is built with the Button Pro, part of Animation Addons Pro, plus native Elementor 4 elements. Extensions they add are named on each card.
A large dark pill on a deep navy hero. On hover, a lighter ripple fills the button and a thin arrow slides in beside the label.
A label pill with a round arrow icon beside it. On hover, the arrow shrinks out on the right and a matching arrow scales in on the left of the label.
A bright, flat button that gains a soft shadow on hover, so it appears to rise off the page. The section heading animates in letter by letter.
A thin-outlined rectangular button under each project. The label flips over on hover, and the whole button drifts toward the cursor.
Three plan cards; the featured plan uses Slide Fill (colour sweeps in from one side), the other two use Outline Pill. One Class sets radius and typography for all three.
Needs Pro: every demo uses Button Pro (Animation Addons Pro). Extensions used are listed per demo.
Features
Every option below is a real control in the Button Pro panel or part of how the element renders. Nothing here needs custom code.
Ripple, text flip, border divide, group swap left, group swap right, shadow, outline pill and slide fill. Each is a complete hover animation, so there is no timeline to build.
The Ripple style animates with GSAP, and its ripple, arrow line and arrow tip are real elements you restyle from their own Style panels.
Group Swap Left and Group Swap Right trade the icon from one side of the label to the other on hover. Use one direction for "next" and the other for "back".
Styles arrive through Apply Preset. Reset to Default restores the button you had before.
Add Mouse Move, Cursor Hover, Tilt or Advanced Tooltip on top of a hover style.
Animation Addons Pro's Lazy Animation loads GSAP only when an animated element nears the viewport, and Reduced Motion controls respect visitors who prefer less movement. Without GSAP, the button keeps working; only the ripple waits.
Step by step
Six steps, from installing the plugin to publishing the page. The bold names are the exact labels you will see in the Elementor 4 panel.
Get Animation Addons ProInstall and activate Animation Addons for Elementor and Animation Addons Pro, then open a page with the Atomic Editor turned on.
Drag Button Pro from the Animation Addons Atomic Elements onto the canvas.
Open Presets, click Apply Preset and choose a hover style.
Edit the button text and set the link.
Style the button in the Style tab and save it as a Class to reuse it.
Preview on desktop and mobile, then publish and hover the live button.
Honest comparison
The free Animation Addons Button already has CSS hover effects. Button Pro adds the motion the free one can't do.
| Feature | Elementor Atomic Button | Animation Addons Button (Free) | Button Pro |
|---|---|---|---|
| Plan | Elementor Free | Animation Addons Free | Animation Addons Pro |
| Icon | No icon setting | Svg child included | Yes |
| Text flip, border divide, outline pill, slide fill | No | Yes, as CSS presets | Yes |
| Ripple (GSAP), group swap left and right, shadow | No | No | Yes |
| Divider-line hover styles (Divided, Cross, Rollover, Parallel Border and more) | No | Yes, Hover Style on the Default preset | No |
| Styled with Classes and Variables | Yes | Yes | Yes |
Compared with Elementor 4.3.3 (September 2026).
If the four shared looks are all you need, the free Button is enough. Get Button Pro for the ripple, the icon swap and the shadow lift.
Who it's for
The people who get the most out of it, and what they use it for.
Giving each client a distinctive call to action without custom code.
With onboarding and pricing pages where buttons carry the conversion.
Building Elementor 4 kits with a consistent animated button system.
FAQ
Add Button Pro from Animation Addons for Elementor, open Presets and click Apply Preset to choose one of its eight hover styles, such as Ripple or Group Swap. Style it in the Style tab and the motion runs on the live page. For free CSS effects like text flip, the free Animation Addons Button also has presets.
Button Pro includes eight hover styles: Ripple, Text Flip, Border Divide, Group Swap Left, Group Swap Right, Shadow, Outline Pill and Slide Fill. Ripple, both Group Swaps and Shadow are only in Button Pro; the other four looks are also in the free Animation Addons Button. Every Button Pro style can be restyled with your own Classes.
The free Animation Addons Button is an open link container with CSS hover effects from presets, including text flip, border divide, outline pill and slide fill, plus seven divider-line Hover Styles. Button Pro, in Animation Addons Pro, adds a GSAP ripple with a sliding arrow, an icon group swap in both directions and a shadow lift.
Button Pro only needs GSAP for the Ripple style; the other seven hover styles are CSS transitions. Animation Addons Pro's Lazy Animation loads GSAP only when an animated element nears the viewport, and its Reduced Motion controls respect visitors who prefer less movement. Animation Addons Pro is also compatible with LiteSpeed Cache and WP Rocket.
Phones have no real hover, so Button Pro's hover styles play at most briefly when a visitor taps; the button still works as a normal link. Make sure the resting state of every Button Pro looks finished on its own, with clear contrast and a readable label, because that is what most mobile visitors see before they tap.
No. Button Pro needs Animation Addons for Elementor and Animation Addons Pro, but not Elementor Pro. It runs on Elementor Free with the Atomic Editor on. Need something free? The free Animation Addons Button adds an icon, a second line and CSS hover effects such as text flip and slide fill.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
Elements that work well with the Button Pro on the same page or template.
Eight hover styles, including a GSAP ripple and icon group swap, on a native Elementor 4 button. Need something free? The free Button has CSS hover effects.
