ボタンに触れる前から、もう動いている。マグネティックボタンとは、カーソルがボタンに近づいただけで引き寄せられるように反応するデザインのことです。本来はJavaScriptでカーソル座標を取得して動かす技法ですが、ラッパー要素の :hover をボタンより広いエリアに設定することで、CSSだけで「近づくと動く」疑似マグネット効果を実現できます。「触れる寸前の緊張感」「ボタンが意志を持っているような感覚」は、ポートフォリオ・ランディングページ・クリエイティブ系サイトのCTAに、ひとつの個性として機能します。
この記事では、マグネティック系のCSSボタンを5パターン紹介します。斜め引き・3D傾き・浮遊と揺れ・引き寄せ膨張・収縮リングの5種で、磁力の「表情」ごとに異なる演出を揃えました。すべてJavaScript不要のCSSのみ実装。各デモはラッパー要素 <div class="mag-wrap"> の内側にボタンを配置する構成で、ラッパーの広いホバーエリアがボタンより早く反応することで疑似マグネット感が生まれます。WordPressやSWELLへのコピペで使えます。
Simple Pull（シンプル・プル）
ホバーエリア（ラッパー）にカーソルが入ると、ボタンが右上に向かってスライドします。transform: translate(8px, -8px) というシンプルな値の変化ですが、cubic-bezier(0.23, 1, 0.32, 1) という緩急のついたイージングが「引っ張られる弾力感」を生み出します。最終フレームに向かって減速しながら止まる動きが、マグネットが静止位置に落ち着く物理的なリアリティに近い。
このデモは5本の中で私が最もクライアントワークに使いやすいと感じています。動きがシンプルな分、デザイン全体の邪魔をせずに「触れる前から反応するボタン」というだけで十分な個性になる。移動方向を変えるだけで矢印の代わりになるので、「詳細を見る」「プロジェクトへ」などのナビゲーション系CTAで特に重宝しています。モノクロームのポートフォリオに置いたとき、白ボタンが黒背景の中でふわっと右上に逃げる動きが、説明文なしで「ここを押して」と語りかけてくれます。
See the Pen Simple Pull by BaseKENT (@basekent) on CodePen.
調整方法
- 移動方向:
translate(8px, -8px)の値を変更します。(-8px, 8px)にすると左下へ、(12px, 0)にすると純粋に右方向への引き寄せになります - 移動量:
8pxを大きくするほど磁力が強くなります。14px以上にすると「飛び出す」感覚に、4px前後にするとさりげない微動になります - イージング:
cubic-bezier(0.23, 1, 0.32, 1)をease-outに変えるとよりなめらかな減速に、spring感は薄れます
3D Tilt（スリーディー・ティルト）
ラッパーにホバーすると、ボタンが奥行きを伴って傾きます。perspective(400px) rotateX(8deg) rotateY(-8deg) translateZ(12px) という複合transformで、まるでボタンが3次元空間で磁石に引き寄せられながら回転しているような演出です。影（box-shadow）も傾きと連動して右下から左上の方向に広がり、光源との整合性がとれているため「実際に傾いている」感覚が強く出ます。
紫系グラデーションの塗りボタンとダーク背景の組み合わせが視覚的に安定します。SaaSのダッシュボード・テクノロジー系LP・ゲーム系サイトのメインCTAに置いたとき、「押したら何かが変わる」という期待感を立体的に表現できます。perspective の値を変えることで3D感の強さをコントロールでき、200px 以下にするとドラマチックな変形に、600px 以上にするとほぼ平面に近い微妙な傾きになります。個人的には 350〜450px の範囲が「品のある立体感」に落ち着くと感じていて、ここから微調整するのがおすすめです。
See the Pen 3D Tilt by BaseKENT (@basekent) on CodePen.
調整方法
- 奥行きの強度:
perspective(400px)の値を小さく（例:200px）するほど3D感が誇張されます。600px以上にすると傾きが控えめになります - 傾き角度:
rotateX(8deg) rotateY(-8deg)の数値を変えます。5deg / -5degにすると穏やかに、12deg / -12degにすると大きく傾きます。rotateYを正にすると傾く方向が逆になります - グラデーション:
linear-gradient(135deg, #667eea 0%, #764ba2 100%)の角度と2色を変えると別テーマの配色に対応できます
Float Wobble（フロート・ウォブル）
通常状態からすでにゆっくりと浮遊し続けており、ラッパーにホバーすると浮遊が崩れて「ぶるぶると揺れながら高く舞い上がる」アニメーションに切り替わります。アイドル時の float-idle アニメーション（緩やかな上下運動）と、ホバー時の float-wobble アニメーション（回転を交えた乱れた上昇）の2段構え設計です。常に生きているように動いている→ホバーで驚いて揺れる、という擬人化された反応がユニーク。
このデモを初めて作ったとき、想定より面白い動きになって少し笑いました。フロートが乱れる動きが「驚いた生き物」みたいで、技術的な話というよりキャラクターが生まれた感覚がある。ミントグリーン（#00c9a7）のピル型ボタンと白系背景の組み合わせが清潔感とポップさのバランスが良く、ライフスタイル系・美容系・フィットネス系のLPに溶け込みます。「プランを選ぶ」「今すぐ試す」といったポジティブな行動を促すCTAに、動き続ける生命感が後押しします。
See the Pen Float Wobble by BaseKENT (@basekent) on CodePen.
調整方法
- 通常時の浮遊速度:
animation: float-idle 3s ease-in-out infiniteの3sを小さくするほど慌ただしく浮遊します。5〜6sにするとゆったりした水の中にいるような動きになります - ホバー時の揺れ強度:
float-wobbleの各フレームのtranslateY値（-14px,-16pxなど）を大きくするほど激しく揺れます。-8px前後に統一するとおとなしい揺れになります - ボタン形状:
border-radius: 50pxを8pxにするとスクエアなボタンでも同じ浮遊アニメーションが使えます
Expand Attract（エクスパンド・アトラクト）
ラッパーエリアにカーソルが入ると、ボタンが膨らみながら影が深く広がります。scale(1.13) の変化に cubic-bezier(0.34, 1.56, 0.64, 1) という弾性のあるイージングを組み合わせることで、ゴムが引っ張られて膨らむような「弾力のある接近感」になります。単なるスケールアップと違うのは、ラッパーのエリアが広い分「まだ触れていないのに反応する」距離感が生まれる点です。
赤系のソリッドボタンが緊張感を演出しますが、同じコードで青・緑・オレンジなど任意のカラーに変更できます。「cart に追加」「購入する」「申し込む」といったクリックの意図が明確なCTAに向いており、「大きく膨らんで迫ってくる」視覚的圧力がクリックへの後押しとして機能します。クリック時（:active）に scale(0.97) で少し縮むレスポンスも組み込んでいるため、押した手応えが感じられます。弾性イージングの 1.56 という値は「バウンスしすぎず、でも確かに弾む」ちょうど良いラインで、ここを起点に調整するのがおすすめです。
See the Pen Expand Attract by BaseKENT (@basekent) on CodePen.
調整方法
- 膨らみの大きさ:
transform: scale(1.13)の値を変えます。1.08にするとさりげない膨らみに、1.18にすると「ぐっと迫ってくる」感覚が強まります - 弾力の強さ:
cubic-bezier(0.34, 1.56, 0.64, 1)の第2引数1.56がオーバーシュートの強さです。1.0にすると弾力がなくなりease-outに近くなります。1.8以上にするとバウンスが強くなります - 影のカラー:
rgba(255, 65, 108, 0.55)の色と不透明度を変えます。ボタンの塗り色と同系色のRGBA値にすることで、どんな色にも自然な発光感が出ます
Cursor Ripple（カーソル・リップル）
ラッパーエリアにカーソルが入った瞬間、ボタンの外側から内側へ向かって光の輪が収縮してきます。::before でボタンより一回り大きいボーダー要素を作り、scale(1.9 → 1) と opacity(0 → 0.7 → 0) を組み合わせた ring-contract アニメーションで「外側から呼び込まれる」演出です。収縮が完了するとボタン本体もゴーストから塗りに切り替わり、「波紋で引き寄せられてボタンが応答した」という一連の流れが完結します。
5本の中でコードの仕組みとしては一番好きなデモです。リングが収縮してくる動きは「磁場がボタンに向かって圧縮されていく」物理的なイメージに近く、CSSアニメーションが「動き」だけでなく「現象の比喩」になっている感覚があります。通常状態はアウトラインのみのゴーストボタン、ホバーで塗りに変わるという設計のため、2段階の変化が視覚的に分かりやすい。SaaS・テクノロジー系サービスの「開始する」「ログイン」系のCTAに自然に馴染みます。
See the Pen Cursor Ripple by BaseKENT (@basekent) on CodePen.
調整方法
- リングの広がり開始地点:
ring-contractのscale(1.9)の値を大きくするほど遠くから収縮してきます。2.5にするとよりダイナミックに、1.4にすると近距離からの収縮になります - リングとボタンのすき間:
btn::beforeのinset: -14pxの値がリングとボタン本体の距離です。-20pxにすると広めのリングに、-8pxにするとほぼボタンと重なったリングになります - ゴーストボタンのカラー:
color: #3a86ffとborder: 2px solid #3a86ffを同じ色に変更し、btn::beforeのborder-colorも合わせることでどんなブランドカラーにも対応できます
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
