マウスカーソルによりボタンが引き寄せられるように動く、ユニークなインタラクションを提供します。ユーザーの展示直後にアニメーションが自動再生されます。
高インパクトなマイクロインタラクション: 一般的なパスアニメーションやグロウエフェクトとは異なり、マウスの追従のいう「磁力」概念を取り入れたコンポーネント。
ポートフォリオ・クリエイティブサイトに最適: 訪問者に小さな驚きを与えて配信力を高めます。
CTR向上効果: CTA（コールトゥアクション）ボタンに適用することで、展示やクリックへの心理的ハードルを下げる効果が考えられます。
JavaScriptのみで実現: ライブラリ不要。mousemove イベントでtransformを動的に更新するシンプルな実装。
物理法則に基づくフィードバック: ボタンがカーソルを打ち返す危険性を感じさせることで、直感的にインタラクティブ要素であることを伝えます。
cubic-bezier(0.23, 1, 0.32, 1): イイースアウト系のカーブを使用することで、ボタンの動きが滑らかで張りがある印象になります。
シマーエフェクト: ::before擬似要素で光が流れるようなエフェクトを実現。
アクセシビリティ: mouseleaveで確実に元の位置に戻るため、キーボード操作やタッチデバイスでも問題ありません。
strength 変数の値を変えることで磁力の強さを調整できます:
// 弱め（微妙な動き）
var strength = 0.15;
// 標準
// var strength = 0.35;
// 強め（大きく動く）
// var strength = 0.5;
ボタンの色を変えるにはCSSの background を変更するだけ:
/* サンセット */
background: linear-gradient(135deg, #f97316, #ef4444);
/* オーシャン */
background: linear-gradient(135deg, #06b6d4, #3b82f6);
/* エメラルド */
background: linear-gradient(135deg, #10b981, #059669);
<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>| ブラウザ | 対応状況 |
|--------|--------|
| Chrome 60+ | ✅ 完全対応 |
| Firefox 55+ | ✅ 完全対応 |
| Safari 10.1+ | ✅ 完全対応 |
| Edge 79+ | ✅ 完全対応 |
タッチデバイスでは
mousemoveイベントが発火されないため、マグネット効果は表示されませんが、ボタンは通常通りクリック可能です。