No.068
CURSOR JS

Magnetic Button

カーソルが近づくとボタンが磁石のように引き寄せられる人気のインタラクション。CTA・ナビのアクセントに。

DEMO

CODE

HTML
<div class="demo-stage mgb-stage"><button class="mgb-btn" type="button">HOVER NEAR ME</button></div>
CSS
.mgb-stage { display:flex; align-items:center; justify-content:center; padding:4rem; background:#0F0F12; min-height:300px; }
.mgb-btn { border:none; cursor:pointer; padding:1.1rem 2.4rem; border-radius:50px; background:#E91B89; color:#fff; font-family:'Oswald',sans-serif; letter-spacing:.12em; font-size:.9rem; transition:transform .25s cubic-bezier(.34,1.56,.64,1); will-change:transform; }
JS
(function(){
  var btn = document.querySelector('.mgb-btn'), stage = document.querySelector('.mgb-stage');
  if(!btn || !stage) return;
  var R = 120;
  stage.addEventListener('mousemove', function(e){
    var r = btn.getBoundingClientRect();
    var dx = e.clientX - (r.left + r.width/2), dy = e.clientY - (r.top + r.height/2);
    if(Math.hypot(dx, dy) < R) btn.style.transform = 'translate(' + dx*0.4 + 'px,' + dy*0.4 + 'px)';
    else btn.style.transform = 'translate(0,0)';
  });
  stage.addEventListener('mouseleave', function(){ btn.style.transform = 'translate(0,0)'; });
})();

AI PROMPT

Claude Cursor v0
PROMPT
カーソルが近づくとボタンが磁石のように引き寄せられるMagnetic Buttonを作って。親要素のmousemoveでボタン中心とカーソルの距離を計算し、反応半径（例120px）内なら btn.style.transform = translate(dx*0.4, dy*0.4) でカーソル方向へ寄せる。半径外とmouseleaveで translate(0,0) に戻す。transition:transform .25s cubic-bezier(.34,1.56,.64,1) で弾性のある戻り。CTA・ナビのアクセントに。

BOOKS · PR · AMAZON

📖 なかしまぁ先生のCSSアニメーション入門 📖 UIデザインの教科書 新版 マルチデバイス時代のインターフェース設計 📖 Fundamentals of Web Animation with GSAP

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

📚 Kindle Unlimited — 技術書・デザイン書が読み放題。30日無料体験 → 🎧 Audible — 移動中に耳で学ぶオーディオブック。30日無料体験 → 📦 Amazon Prime — Prime Reading・配送特典つき。30日無料体験 → 🎵 Music Unlimited — 作業用BGMに。1億曲が聴き放題・30日無料体験 →

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

マグネットボタン（Magnetic Button）とは

カーソルが近づくとボタンが磁石のように引き寄せられる人気のインタラクション。CTA・ナビのアクセントに。この効果は主にJavaScriptでDOMを操作し、要素の位置やスタイルを動的に書き換えて実現します。

使いどころ

ブランドサイト・ポートフォリオ・LPのファーストビューなど、世界観を演出したい場面に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

JavaScriptで座標やタイミングを計算しながら要素のstyleを書き換えます。更新はrequestAnimationFrameでブラウザの描画タイミングに同期させ、位置の変更はtransformで行うとレイアウト再計算を避けられて軽くなります。動きを減らす設定（prefers-reduced-motion）の利用者へは演出を控えめにする配慮も大切です。

CSSとJavaScriptの違い

CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。