Atomic Element · Free
Elementor 4's own button is a text label. This one drops in with an icon already inside, takes a second line, a logo or a whole card, and gets a ready hover effect from a preset. Free on Elementor Free.
The short answer
The Button is a free Elementor atomic button from Animation Addons for Elementor that works as an open link container. It drops in with an icon and a label as real child elements and accepts headings, images, dividers and boxes. Apply a preset for a ready hover effect, set the Link, and add nofollow with one switch.
Many "Elementor V4 compatible" addons are classic v3 widgets. This Button is a native Atomic Element: its icon and label are real elements you select in the Navigator and style with Classes.
| Plan | Free |
|---|---|
| Element type | Native Elementor 4 Atomic Element (open container, renders an <a>) |
| Works with | Elementor Free and Elementor Pro, Atomic Editor on |
| Child elements | Svg (icon) and Paragraph (label) by default; also accepts Heading, Paragraph, Svg, Image, Divider, Button, Flexbox, Div Block |
| Controls | Apply Preset, Link, Add Nofollow, Hover Style (after the Default preset), ID |
| Hover effects | CSS only: the Default preset's Hover Style (None, Divided, Cross, Cropping, Rollover Top, Rollover Left, Parallel Border, Rollover Cross), plus presets with text flip, border divide, mask, outline pill, slide fill and underline effects |
| Scripts | No GSAP; a small script and stylesheet load only on pages that use the Button |
| Plugin version | Animation Addons for Elementor 4.3 · Last updated October 2026 |
Demo variations
Ideas you can build today with the Button and native Elementor 4 elements. Cards marked Pro add an Animation Addons Pro extension or element; the rest work on the free plugin.
A teal rounded button in the hero with a small calendar icon before the label.
A dark, square-cornered button where a thin accent bar rolls across the label on hover.
A compact pill whose label flips up on hover while an identical copy rolls in from below.
A black button with a store logo on the left, a small "Download on the" line and a larger store name below.
noopener automatically.A card with a cover image, a course title and a lesson count. The entire card is one link and lifts slightly on hover.
An outlined pill under each product verdict that fills with colour from one side on hover.
rel="noopener nofollow".Features
Every option below is a real control in the Button panel or part of how the element renders. Nothing here needs custom code.
Drop in Heading, Paragraph, Svg, Image, Divider, Flexbox or Div Block children. One element covers a one-word button, a two-line app button and a whole linked card.
The icon is Elementor's own Svg element, sized at 1em, so one Font Size change in Typography resizes it. Reorder it after the label in the Navigator.
Apply Preset swaps in a finished design. The effects are pure CSS: text flip, border divide, mask, outline pill, slide fill and underline. Reset to Default brings back your original button.
After the Default preset, a Hover Style control appears: Divided, Cross, Cropping, Rollover Top, Rollover Left, Parallel Border, Rollover Cross, or None. The moving line is a real Divider you recolour and resize.
Set the Link with Elementor's standard link control. A new tab adds noopener automatically; Add Nofollow adds nofollow for sponsored links.
Built on the atomic base
Why it mattersThe label Class you set once updates every button, and a second line never means switching widgets.
<a>: Link, Add Nofollow, preset, Hover StyleStep 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.
Download freeInstall and activate Animation Addons for Elementor, then open a page with the Atomic Editor turned on.
Drag Button from the Animation Addons Atomic Elements onto the canvas.
Optional: open Presets and click Apply Preset; pick the Default preset to unlock Hover Style.
Paste the Link, choose a new tab if needed, and switch on Add Nofollow for sponsored links.
Select the icon or label in the Navigator to change the SVG or text, or drag in extra elements.
Style the Button and its children with Classes, check mobile, then publish.
Honest comparison
What each option has, side by side. We list where the other choice is the better fit, too.
| Feature | Elementor Atomic Button | Animation Addons Button |
|---|---|---|
| Requires Elementor Pro | No | No |
| Icon | No icon setting | Svg child included |
| What goes inside | A text label | Any Heading, Paragraph, Svg, Image, Divider, Flexbox or Div Block |
| Text editing | Inline on the canvas | Label is a native Paragraph child |
| Hover | Hover state with Classes | Hover state plus preset hover effects and Hover Style |
| Classes and Variables | Yes | Yes |
Compared with Elementor 4.3.3 (September 2026).
Elementor's Atomic Button is the quickest choice for a plain text link. Use this one for an icon, a second line, a card-style link or a ready hover effect.
Who it's for
The people who get the most out of it, and what they use it for.
Building one button Class every client page reuses.
Making two-line download and sign-up buttons.
Who want hover effects without paying.
That need nofollow links.
FAQ
Elementor 4's own Atomic Button has no icon setting, so use the free Button from Animation Addons for Elementor. The Animation Addons Button drops in with an icon and a label as real child elements. Select the icon in the Navigator to swap the SVG, change the Button's Font Size to resize it, or move it after the label.
Yes. The Animation Addons Button is an open container, so drag a Flexbox inside it, set the direction to column and place two Paragraphs in it. That is how app store buttons with a small top line and a larger bottom line are built, with no custom HTML, and the whole button stays one link.
Select the Animation Addons Button and click Apply Preset. The free presets include CSS hover effects such as text flip, outline pill and slide fill, and the Default preset adds a Hover Style control with seven effects like Rollover Top. Animation Addons Button effects are CSS, so they need no extra animation library.
The free Animation Addons Button has CSS hover effects from presets, including text flip, border divide, outline pill and slide fill. Button Pro, part of Animation Addons Pro, has eight styles: those four looks plus a GSAP ripple, a shadow hover and a group swap in two directions. Pick Button Pro for the ripple, shadow or icon swap.
Yes. The Animation Addons Button renders a real <a href> link with its text in the page HTML, so search engines follow it, and Add Nofollow writes a real rel attribute. Focus and pressed states dim the button slightly, and without a link it renders with role="button" and can take keyboard focus.
No to both. The Animation Addons Button's small script and stylesheet load only on pages that use it, and hover effects run on CSS, not GSAP. It is part of the free Animation Addons for Elementor plugin and works on Elementor Free with the Atomic Editor on; Pro extensions such as Tilt are optional.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
Elements that work well with the Button on the same page or template.
adds a GSAP ripple, a shadow hover and a two-way group swap.
the contact or quote form your button leads to.
a slide-in panel for menus and details next to your calls to action.
the benefits list above the button.
a spinning badge as a playful alternative prompt.
Icon, second line and hover effects, free on Elementor Free.