CodePenで公開されている、CSSやJavaScriptで作られたマグネットボタン(磁石風ボタン)のアイデアを10個セレクトしました。ボタンごとカーソルに追従するシンプルなタイプから、GSAPで滑らかな動きをつけたもの、テキストだけが吸い寄せられるように動くものまで、幅広いバリエーションを集めています。各スニペットには実装のポイントも添えているので、どんな仕組みで動いているのか、どこを見ればカスタマイズできるのかが把握しやすくなっています。気になるデザインが見つかったら、実際のサイト制作の参考にしてみてください。
マグネットボタンのアイデア
Magnetic Button with Directional Dependent Hover Effekt
ボタンの角度も変化する磁石風ボタン
See the Pen Magnetic Button with Directional Dependent Hover Effekt by Stefan Koller (@St3Ko) on CodePen.
- Author : Stefan Koller
- Link : CodePen – Demo
💡 実装のポイント
ボタンのoffset-hover-max・offset-hover-min属性(％指定)で、マウスがどのくらい近づいたら反応するかの判定距離を調整できる仕組み。jQuery + TweenMaxで実装されており、mouseenter/mouseleave時にMath.atan2でカーソルの進入方向を0〜3の4方向に判定し、その方向から背景色パネル(.magnet-btn__bg)がスライドインする。方向ごとの動きはTweenMax.fromToのswitch文で個別に定義されている。
Magnetic button
MamboMamboサイト風のバブルが広がる磁石風ボタン
See the Pen Magnetic button by Alex Vachon (@ostaladaFab) on CodePen.
- Author : Alex Vachon
- Link : CodePen – Demo
💡 実装のポイント
SCSSの@mixin magnetでボタンの基本スタイルを定義し、ES6クラスMagnetとGSAP3のタイムラインでカーソル追従と円形バブルの拡大演出(scaleX/scaleY: "15000%")を実装。追従の強さはコンストラクタ第2引数のmagnetism(初期値0.2)で調整でき、setIntervalで30msごとにイージング計算しながら座標を近づけていく方式。
Magnetic elements
3D的な傾きが加わる磁石風ボタン
See the Pen Magnetic elements by Georgy Marchuk (@gmrchk) on CodePen.
- Author : Georgy Marchuk
- Link : CodePen – Demo
💡 実装のポイント
自作の軽量フレームワーク(giaCursorDistance)を継承した独自クラスで実装されており、汎用ライブラリ非依存の点がユニーク。カーソルとの距離に応じてtranslate3dとrotateX/rotateYを同時に適用し、perspective: 1800pxを親要素に指定することで立体的な傾き表現を作っている。移動可能な最大距離は要素の対角線長+任意距離(options.distance)で算出。
React Magnetic Button With Staggering Text Animation
テキストが1文字ずつ入れ替わる磁石風ボタン(React)
See the Pen React Magnetic Button With Staggering Text Animation by Chris Johnson (@chrisjdesigner) on CodePen.
- Author : Chris Johnson
- Link : CodePen – Demo
💡 実装のポイント
Reactの関数コンポーネントMagneticButtonとして実装され、GSAPのSplitTextプラグインでボタン内テキストを1文字ずつ分解し、hover時にスタガーアニメーション(stagger: 0.015)で切り替える構成。追従量はgsap.utils.mapRangeでボタンと文字要素それぞれの移動範囲をtollerance係数で制限しており、onTouchMove/onTouchStart/onTouchEndも実装済みでタッチ操作にも対応している。
Magnetic button animation
カスタムカーソルと連動する磁石風ボタン
See the Pen Magnetic button animation by Milan Raring (@milanraring) on CodePen.
- Author : Milan Raring
- Link : CodePen – Demo
💡 実装のポイント
ライブラリ不使用のプレーンJSで、mousemove時にカーソルとボタン中心の差分からtranslateとrotate3dをインラインスタイルで直接書き換えるシンプルな仕組み。ページ全体にcursor: noneを指定し、代わりに.cursor要素をグローバルなマウス座標に追従させ、ボタンhover時はmix-blend-mode: differenceでリンク判定を視覚的に示している。
Magnetic button
ボタンとテキストで速度差をつけたパララックス風の磁石風ボタン
See the Pen Magnetic button by damien franco (@kaneim) on CodePen.
- Author : damien franco
- Link : CodePen – Demo
💡 実装のポイント
Stylus + jQuery + GSAPの構成。共通関数parallaxIt(e, target, movement)を用意し、ボタン本体にはmovement: 60、内側のテキストにはmovement: 40と異なる移動量を指定することで、要素ごとに追従スピードをずらしたパララックス風の奥行き表現を作っている。hover時はscale: 1.1で軽く拡大する演出も付加。
Magnetic Button v3 vanillaJS + GSAP3
GSAP公式が公開する、判定エリアを可視化したマグネットボタン
See the Pen Magnetic Button v3 vanillaJS + GSAP3 by GreenSock (@GreenSock) on CodePen.
- Author : GreenSock
- Link : CodePen – Demo
💡 実装のポイント
見た目のボタン(.js-magnetic-content)と、反応する判定エリア(.js-magnetic-area)をSCSS変数$magnetic-sizeで意図的に分離しているのが最大の特徴。判定エリアをマージンで見た目より大きく確保することで、ボタンに触れる前から反応する自然な「引き寄せ」感を出している。移動先はエリア基準のバウンディングボックスからgsap.to()で計算。
Shapka Magnet Button w/ ScrollTrigger
スクロールと連動して回転する円形テキスト付きの磁石風ボタン
See the Pen Shapka Magnet Button w/ ScrollTrigger by Charly (@_cbernard) on CodePen.
- Author : Charly
- Link : CodePen – Demo
💡 実装のポイント
ES6クラスhoverEffectで磁石判定と、GSAP ScrollTriggerによる円形テキスト(textPath)の回転演出を組み合わせている。判定距離の閾値をhover中(0.7)と非hover時(0.5)で変えることでチラつきを防ぐヒステリシス設計になっている点が実装上のポイント。ScrollTriggerのscrub: trueはスクロール量にそのままアニメーション進行を同期させる指定。
iPadOS mouse cursor magnetization
iPadOS風のグリッドメニューに実装した磁石風カーソル
See the Pen iPadOS mouse cursor magnetization by Krar (@Krar) on CodePen.
- Author : Krar
- Link : CodePen – Demo
💡 実装のポイント
Pug + Stylusで構築。CSSカスタムプロパティ(--x・--y・--w・--c)にJSから座標やサイズを書き込み、カーソル要素の位置・拡大・不透明度をCSS側で一括制御している設計が特徴。ボタンにはbackdrop-filter: blur(8px)でガラス質感を出しているため、非対応の古いブラウザでは単純な半透明背景として表示される点に注意。
Magnetic Link Hover Effect
ナビゲーションのテキストリンクに実装した磁石風ホバー
See the Pen Magnetic Link Hover Effect by Nishit Sarvaiya (@nishit-sarvaiya) on CodePen.
- Author : Nishit Sarvaiya
- Link : CodePen – Demo
💡 実装のポイント
ライブラリ不使用の最小構成で、offsetX/offsetYをリンク自身のoffsetWidth/offsetHeightで正規化し、±20pxの範囲で内側のspanだけをtranslateさせるシンプルな仕組み。ページ全体にcursor: noneを指定し、mix-blend-mode: differenceのカーソル円をグローバルなmousemoveで追従させている。
マグネットボタンとは？
マグネットボタンとは、カーソルがボタンに近づくと、まるで磁石に引き寄せられるようにボタン自体やその中のテキストがカーソル方向へわずかに動く、インタラクティブなUI表現のことです。ポートフォリオサイトやブランドサイトのCTAボタン、ナビゲーションリンクなどでよく使われており、ユーザーの操作に対して有機的な反応を返すことで、サイト全体の質感や印象を高める効果があります。
実装方法としては、mousemoveイベントでカーソルとボタン中心の距離・角度を計算し、その値に応じてtransform: translate()を適用するのが基本形です。素のJavaScriptだけでも作れますが、動きを滑らかにするためにGSAPなどのアニメーションライブラリを併用したり、判定エリアと見た目のボタンを分離してより自然な「引力」を演出したりと、実装の工夫にはさまざまなバリエーションがあります。
CodePenとは？
CodePenは、HTML、CSS、JavaScriptを使ってウェブページのプロトタイプや実装を行うことができるオンラインの開発環境です。
CodePenでは、ウェブ開発者やデザイナーが、ブラウザ上でコードを書きながら、すばやく試行錯誤することができます。ユーザーは自分のプロジェクトを公開し、他のユーザーによるフィードバックを受けたり、共有することもできます。
CodePenには、エディター機能が搭載されており、HTML、CSS、JavaScriptのコードを入力することができます。また、ユーザーが公開したプロジェクトは、フロントエンドの技術を利用して動的な表現やアニメーションを作ることができます。
よくある質問
-
SCSSやStylus、Pugで書かれたコードはそのまま使えますか？
そのままでは動作しません。いずれもコンパイルが必要な言語のため、対応するビルド環境がない場合はCodePen上の「View Compiled CSS」「View Compiled HTML」から通常のCSS・HTMLを書き出して使用してください。
-
GSAPを使っている実装が多いようですが、必須ですか？
必須ではありません。今回紹介した中にも
mousemoveイベントとtransformだけで実装しているシンプルな例があります。GSAPは主に、動きのイージングや複数要素のタイムライン管理を簡単に行いたい場合に使われています。 -
スマートフォンなど、タッチデバイスでは動作しますか？
mousemoveのみで実装されている例はタッチデバイスでは反応しません。タッチ操作にも対応させたい場合は、今回紹介したReactの実装例のようにtouchstart・touchmove・touchendイベントも別途登録する必要があります。 -
cursor: noneを使っている実装がありますが、アクセシビリティ的に問題ありませんか？カスタムカーソルでネイティブカーソルを隠す実装は演出として効果的ですが、キーボード操作のみのユーザーには恩恵がないため、
:focus-visibleによるアウトライン表示など、マウス以外の操作でもボタンの位置が分かる代替手段を併用することをおすすめします。
