Magnetic Button

Preview

It provides a unique interaction in which the button moves as if it were pulled by the mouse cursor. The animation will automatically play immediately after the user exhibits.

Use cases and features

• High-impact micro-interaction: Unlike general path animations and glow effects, this component incorporates the “magnetic force” concept of mouse tracking.

• Perfect for portfolio/creative sites: Increase your distribution power by giving your visitors a small surprise.

• CTR improvement effect: By applying this to CTA (Call to Action) buttons, it is thought to have the effect of lowering the psychological hurdles for displaying and clicking.

• Achieved only with JavaScript: No library required. A simple implementation that dynamically updates transform on the mousemove event.

Points of design and UX

1. Physics-Based Feedback: Intuitively communicate that a button is an interactive element by creating a risk of hitting the cursor.

2. cubic-bezier(0.23, 1, 0.32, 1): By using an easy-out type curve, the button movement will appear smooth and tight.

3. Shimmer effect: Achieve the effect of flowing light with the ::before pseudo element.

4. Accessibility: mouseleave reliably returns to the original position, so there is no problem with keyboard operation or touch devices.

How to customize

You can adjust the strength of the magnetic force by changing the value of the strength variable:

// 弱め（微妙な動き）

var strength = 0.15;



// 標準

// var strength = 0.35;



// 強め（大きく動く）

// var strength = 0.5;

To change the button color, just change the background CSS:

/* サンセット */

background: linear-gradient(135deg, #f97316, #ef4444);



/* オーシャン */

background: linear-gradient(135deg, #06b6d4, #3b82f6);



/* エメラルド */

background: linear-gradient(135deg, #10b981, #059669);

Implementation code

<button class="magnetic-btn" id="magnetic-btn">

HOVER ME

<span class="magnetic-btn-arrow">→</span>

</button>



<style>
.magnetic-btn {

position: relative;

padding: 18px 48px;

font-size: 1.1rem;

font-weight: 700;

letter-spacing: 0.1em;

color: white;

background: linear-gradient(135deg, #6366f1, #8b5cf6);

border: none;

border-radius: 50px;

cursor: pointer;

outline: none;

box-shadow: 0 20px 60px rgba(99,102,241,0.4);

transition: transform 0.15s cubic-bezier(0.23,1,0.32,1), box-shadow 0.3s ease;

display: inline-flex;

align-items: center;

gap: 10px;

overflow: hidden;

}

.magnetic-btn::before {

content: '';

position: absolute;

top: -50%;

left: -60%;

width: 40%;

height: 200%;

background: rgba(255,255,255,0.15);

transform: skewX(-20deg);

transition: left 0.5s ease;

pointer-events: none;

}

.magnetic-btn:hover::before { left: 120%; }

.magnetic-btn:hover {

box-shadow: 0 30px 80px rgba(139,92,246,0.6), 0 20px 60px rgba(99,102,241,0.4);

}

.magnetic-btn-arrow {

display: inline-flex;

transition: transform 0.3s ease;

pointer-events: none;

}

.magnetic-btn:hover .magnetic-btn-arrow { transform: translateX(4px); }
</style>



<script>

(function() {

var btn = document.getElementById('magnetic-btn');

if (!btn) return;

var strength = 0.35;

btn.addEventListener('mousemove', function(e) {

  var rect = this.getBoundingClientRect();

  var dx = e.clientX - (rect.left + rect.width / 2);

  var dy = e.clientY - (rect.top + rect.height / 2);

  this.style.transform = 'translate(' + (dx*strength) + 'px,' + (dy*strength) + 'px) scale(1.08)';

});

btn.addEventListener('mouseleave', function() {

  this.style.transform = '';

  this.style.boxShadow = '';

});

})();

</script>

Browser compatibility status

| Browser | Compatibility status |

|--------|-------|

| Chrome 60+ | ✅ Fully compatible |

| Firefox 55+ | ✅ Fully compatible |

| Safari 10.1+ | ✅ Fully compatible |

| Edge 79+ | ✅ Fully compatible |

The mousemove event is not fired on touch devices, so the magnet effect is not displayed, but the button is clickable as usual.