Magnetic Button
マグネティックボタン
どんな動き？
ボタン周辺にカーソルが近づくと、まるで磁石に引き寄せられるようにボタン自身がカーソルの方向へわずかに移動するアニメーション。カーソルが離れると弾かれるように元の位置へ戻る。遊び心のあるインタラクションとして、クリエイティブ系サイトのCTAボタンやSNSアイコンに使われることが多い。
よく使う場所
CTAボタンSNSアイコンナビゲーション
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Pull the button toward the cursor as it approaches, then spring back when the cursor leaves.Trigger:
mousemove within a magnetic radius around the button (hover).
Initial state:
translate: 0, 0
Animation:
The button translates toward the cursor's position, offset by a fraction (e.g. 30%) of the distance, following in real time as the cursor moves.
Final state:
On mouse leave, the button springs back to translate: 0, 0.
Timing:
duration: ~0.3s per update, easing: ease-out (spring-like).実装方法の候補
この動きは以下の技術で実装できます。
JavaScript (mousemove + transform)GSAP
別名・関連ワード
Magnetic HoverCursor Attract ButtonMagnet Effect