WordPress VIP Standard
Magnetic Button
Elevate your call-to-actions. A highly optimized, hardware-accelerated button that organically pulls towards the user’s cursor. Built for conversions.
Live Demo
Organic LERP hover.
Calculates cursor distance natively without heavy libraries like GSAP. The magnetic pull feels organic and instantly releases when the mouse leaves.
Perfect for cards. The stretched link technology covers parent containers seamlessly without breaking the Gutenberg editor layout.
Unlock premium aesthetics with a single click. Includes automated outline modes, backdrop blurs, and animated CSS sweeping masks.
What’s in the Box?
The core functionality is 100% free. Upgrade to PRO for cinematic visuals.
Kinetic Lite
Kinetic PRO
How to configure
Quick setup guide for the Magnetic Button.
Open the Gutenberg editor, select the Magnetic Button block, and navigate to the tab in the right sidebar. Here you can adjust both the “Magnetic Pull” (how fast it moves) and the “Detection Range” (how far away from the button the mouse needs to be to trigger it).
To prevent layout thrashing and keep the WordPress editor fast, complex physics and mouse-tracking event listeners are disabled in the backend.
When enabled from the Link Panel, the button will project an invisible clickable layer over its closest parent container that has position: relative . This is perfect for making entire pricing cards or feature boxes clickable while only having one actual button.
Toggle the “Outline Mode” switch in the Colors tab. The block engine will automatically calculate a transparent background and apply your primary color to the border and text, then invert them on hover. No manual CSS needed!