マグネティックボタン
カーソルに吸い付くように動くボタン。近づくとぬるっと反応して、つい動かしたくなる。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- LPの主要CTAに遊び心を足す
- ポートフォリオ・ブランドサイト
- カーソル操作が主のPC向け画面
- 避ける場面
- 業務画面の常用ボタン（位置が動くと押しにくい）
- 小さなボタンの密集
- スクロールを奪えない場所（touch-action:none）
- 構成要素
- ステージ
- ボタン
- ラベル
- 持っている状態
- 通常
- ホバー
- キーボード
Tab でボタンへ・Enter／Space で実行（button 標準）。吸い付きはポインタ専用
- 支援技術
吸着は装飾で読み上げに影響しない。reduced-motion では追従を止めて動かない。focus-visible の輪郭はボタンと一緒に動くので隠れない
- 動き
transform 0.2s ease-out で距離減衰しつつ最大 0.4 倍追従、ラベルはさらに 0.4 倍遅れて動く。reduced-motion では無し
原則フィッツの法則
デザインの要点
- 反応範囲はボタンの外側 120px まで広げ、距離で吸引力を減衰させる。ボタン上だけで反応すると「吸い付く」前に乗ってしまう
- 追従量はカーソル差分の 0.4 倍まで。等倍で付いてくるとボタンが逃げて押せない
- ラベルは本体よりさらに 0.4 倍遅らせる。2 層がずれて動くことで、平面のボタンに奥行きが出る
- 範囲外に出たら transform を空に戻す。0 へ補間せず「無し」にすると、次に入ったとき前回の位置から跳ねない
コード（コピーして使えます）
<div class="mag-stage"><button class="mag-btn"><span>さわってね</span></button></div>