カーソルを引き寄せるマグネットボタン
マウスカーソルに引き寄せられる磁石効果ボタン。Awwwards 系のクリエイティブサイトで頻出。JavaScript + transform translate でなめらか追従。
解説
マグネットボタンは、カーソルがボタンに近づくと吸い寄せられるように動く対話的なボタンです。仕組みは mousemove イベントで実装されています。getBoundingClientRect() でボタンの中心からカーソルまでの距離を計算し、その値に係数（外枠 0.3・内側の文字 0.15）を掛けて transform:translate() に渡します。外枠より文字の追従量を小さくすることで、ボタンと文字がわずかにズレ、奥行きのある「引き寄せ」感が生まれます。カーソルが離れる mouseleave で transform を空に戻し、cubic-bezier のトランジションがバネのように元へ戻します。
使う場面
- Awwwards 系・ポートフォリオなど世界観を重視するサイトの主要ボタン
- ヒーローの「View Works」「Contact」など印象づけたい導線
- 余白を広く取ったミニマルなデザインのアクセント
吸い寄せの強さは JavaScript 内の係数 0.3 と 0.15 で調整できます。値を上げると大きく動き、下げると控えめになります。注意点として、この効果はマウス前提なのでタッチ端末では発火しません。タップで壊れないようリンク本来の機能は保ち、装飾として添える設計にしてください。多用すると操作の妨げになるため、1画面に1〜2個までが目安です。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
吸い寄せの動きが強すぎる・弱すぎるときは
JavaScript内のtranslateに掛けている係数を変えます。外枠の0.3と文字の0.15を大きくすると動きが強く、小さくすると控えめになります。文字側は外枠より小さい値にするとズレによる奥行きが出ます。
スマホのタップでも動きますか
この効果はmousemoveを使うためマウス操作が前提で、タッチ操作では発火しません。スマホでは普通のボタンとして機能するよう、ボタン本来のクリック動作は別に確保しておきましょう。