Customize your magnetic button effect using the controls below
Click Copy JS to copy the JavaScript code to clipboard
In Bricks Builder, add a Code element
Paste or upload the JavaScript code
To add the effect to any button: go to Button → Style → Attributes, add data-magnetic as attribute name (leave value empty)
Mobile: Touch and drag your finger around the button to see the magnetic effect!

📱 Touch and drag around the button to see the magnetic effect

Button Configuration

Button Text

Magnetic Settings

Magnetic Strength

0.5

Magnetic Radius

200px

Rotation Strength

Mobile Touch Settings

Touch Sensitivity

Touch Radius Multiplier

1.5x

Advanced Options

Transition Timing

Transition Duration

0.2s

Magnetic Button - Bricksfusion

LIGHT

Magnetic Button

Creates magnetic attraction effect where buttons pull toward cursor within radius. Uses distance-based calculations with CSS transforms for smooth movement and rotation. Features customizable strength, attraction radius, and rotation intensity. Supports touch with enhanced sensitivity. Perfect for CTAs, navigation, or adding playful interactivity to any button.

Magnetic Button

Move your cursor near the buttons to see the magnetic attraction.

Magnetic Effect

Strength 0.1-1.5

Magnetic pull intensity. Higher creates stronger attraction and more dramatic movement toward cursor.

Default: 0.5

Radius 50-500 pixels

Detection distance from button center. Magnetic effect activates when cursor enters this range.

Default: 200

Rotation 0-20 degrees

Rotation intensity based on cursor angle. Adds dynamic tilt effect as button follows cursor.

Default: 5

Animation

Timing CSS easing

Easing function for movement. Controls acceleration curve and overall feel of magnetic attraction.

Default: cubic-bezier(0.23, 1, 0.32, 1)

Duration 0.1-0.5 seconds

Transition speed. Lower is snappier and more responsive, higher is smoother and more fluid.

Default: 0.2

Touch

Touch Sensitivity 0.5-2.0

Strength multiplier for touch devices. Higher compensates for less precise touch input.

Default: 1

Touch Radius 1.0-3.0

Detection radius multiplier for touch. Higher creates larger activation area on mobile.

Default: 1.5

Performance

This element uses CSS transforms (translate, rotate) for hardware-accelerated movement. Calculates distance and angle using Math.sqrt and Math.atan2 for magnetic force simulation. Features window-level mousemove listener with distance checks to minimize calculations. Supports both mouse and touch with passive event listeners where possible. Very lightweight - suitable for all devices with unlimited instances per page and smooth 60fps performance.