Creative · Elementor
Magnetic Buttons widget for Elementor
Buttons that ease toward the cursor on hover. Use on a few CTAs, not every link.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
Buttons that ease toward the cursor on hover. Use on a few CTAs, not every link.
Magnetic Buttons Widget (Free).
render() writes HTML data attributes: data-options, data-target.
The widget script reads data attributes: data-magnetic-init.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Magnetic Buttons”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Button Text”, “Aria Label”, “Button Link”, “Alignment”. Style and Content tabs are listed on this page.
When to use it
- A hero primary button.
- A pricing “get started”.
- A small set of nav CTAs.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Content — Button Text | Saved on the widget and consumed in render(). |
| Content — Aria Label | Used when the button text is empty. |
| Content — Button Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Content — Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Content — Size | The chosen value is read in render() and applied on the front end. Options: Small; Medium; Large. |
| Content — Enable Icon | Switcher inspector control (`kng_button_icon_enable`). |
| Content — Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Content — Icon Position | The chosen value is read in render() and applied on the front end. Options: Left; Right. |
| Content — Icon Spacing | Spacing/size control (min 0, max 40). |
| Magnetic — Enable Magnet | Switcher inspector control (`kng_magnet_enable`). |
| Magnetic — Strength | Spacing/size control (min 0, max 100). |
| Magnetic — Radius | Spacing/size control (min 20, max 400). |
| Magnetic — Max Offset | Spacing/size control (min 0, max 60). |
| Magnetic — Return Speed | Spacing/size control (min 0, max 100). |
| Magnetic — Easing | The chosen value is read in render() and applied on the front end. Options: Smooth; Snappy; Calm. |
| Button — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-magnetic-buttons__button`. |
| Button — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Button — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 80). |
| Button — Border Width | Spacing/size control (min 0, max 8). |
| Button — Border Style | Options: None; Solid; Dashed; Dotted; Double. |
| Button (Normal) — Background Color | Color written to this widget’s CSS selector. |
| Button (Normal) — Text Color | Color written to this widget’s CSS selector. |
| Button (Normal) — Border Color | Color written to this widget’s CSS selector. |
| Button (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-magnetic-buttons__button`. |
| Button (Hover) — Background Color | Color written to this widget’s CSS selector. |
| Button (Hover) — Text Color | Color written to this widget’s CSS selector. |
| Button (Hover) — Border Color | Color written to this widget’s CSS selector. |
| Button (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-magnetic-buttons__button:hover`. |
| Button — Transition Duration (ms) | Numeric control (default 220, min 0). |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
What does Magnetic Buttons actually change on the page?
Buttons that ease toward the cursor on hover. Use on a few CTAs, not every link. Inspector labels from this widget’s PHP include “Button Text”, “Aria Label”, “Button Link”, “Alignment”.
How do I add Magnetic Buttons in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Magnetic Buttons”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related creative widgets
Auto-Scrolling Text
A CSS marquee for a short phrase or logo strip. Keep the text short; this is not a blog loop.
3D Holographic Card
A 3D card with holographic sheen, rim light, and parallax — one decorative object, not a post loop.
Creative Button
A button with extra shapes and hover treatments beyond Elementor’s default button.
Pulsing Button
A CTA with a pulse animation so it reads as the next action on a busy page.
Spotlight Reveal
A spotlight that follows the pointer and reveals the layer underneath — a hover effect, not a content widget.
Styled Text Builder
One text block with per-span styling and motion, instead of several heading widgets.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Magnetic Buttons after you activate it.