ボタンを押したとき、バネのように弾んで返ってくる——そんな動きを「なんか気持ちいい」と感じた経験はないでしょうか。transitionのcubic-bezierでY値を0〜1の範囲外に設定すると、CSSだけで「行き過ぎてから戻る」オーバーシュートの動きが作れます。さらに2024年から主要ブラウザで対応が揃ったlinear()関数を使えば、物理的なバネの挙動を多点指定で精密に再現することも可能です。
今回は5種類のスプリング系ボタンを紹介します。ホバーで拡大してバウンスする基本形・押し込み後の弾き返り・横に潰れて縦に伸びるゼリー変形・linear()による物理ばね再現・ゆっくり揺れて収束するウォブル型のバリエーションを揃えました。JavaScriptなし・CSSのみの実装です。
Basic Spring（ベーシック・スプリング）
もっともシンプルなスプリング実装です。transitionの第3引数にcubic-bezier(0.68, -0.55, 0.27, 1.55)を指定することで、ホバー時のscale(1.15)へのアニメーションが「少し行き過ぎてから落ち着く」動きになります。Y値に負値（-0.55）と1を超える値（1.55）を使うのがポイントで、これがCSSで許可されているオーバーシュート指定の基本形です。
ブルー背景のシンプルなボタンで設計しており、フォームのサブミットボタンやCTAボタンとして最も汎用的に使いやすいデザインです。「クリックしてほしい」という視覚的な誘いとして、控えめながら確実に効きます。
See the Pen Basic Spring by BaseKENT (@basekent) on CodePen.
調整方法
- バウンスの強さ:
cubic-bezierの第2・第4引数（現在-0.55,1.55）を大きくするほど激しく弾みます。-0.3, 1.3で穏やか、-0.8, 1.8で大きく跳ねます - 拡大率:
scale(1.15)の数値を1.08にすると控えめに、1.25にするとより大きく膨らみます - カラー:
background: #2563eb（ブルー系）をブランドカラーに変更してください
Press Bounce（プレス・バウンス）
:active（押し込み中）でscale(0.88)まで縮み、指を離した瞬間に弾性で元の大きさより少し超えてから戻るボタンです。「ボタンを押した手応え」の視覚的フィードバックとして、タッチデバイスやゲーム系UIで特に効果を発揮します。
ポイントは:activeと:not(:active)に別々のtransitionを設定している点です。押し込む動作（0.08s・速い）と弾き返り（0.5s cubic-bezier・遅くてバウンシー）を使い分けることで、「素早く沈んでゆっくり弾む」という自然な感触を作っています。
See the Pen Press Bounce by BaseKENT (@basekent) on CodePen.
調整方法
- 押し込み深さ:
:activeのscale(0.88)を小さくするほど深く沈みます。0.93で控えめ、0.80でしっかり押し込む感覚になります - 弾き返り速度:
:not(:active)のtransition秒数（現在0.5s）を短くすると素早く、長くするとゆっくり戻ります - カラー:
background: #f59e0b（アンバー系）をお好みの色に変更してください
Jelly Scale（ジェリー・スケール）
横に潰れて縦に伸びる「ゼリー変形」を@keyframesで実現したボタンです。scaleXとscaleYを逆方向に動かす6ステップのアニメーションで、物理的に弾力のある素材が変形・復元していくような動きを作っています。cubic-bezierの単純なオーバーシュートとは異なり、「X軸が縮むとY軸が伸びる」という体積保存の感覚が独特の面白さを生みます。
バイオレット系のカラーで整えており、ゲーム・エンタメ・クリエイティブ系のサイトで映えます。「クリックした！」という達成感の演出として使いやすいボタンです。
See the Pen Jelly Scale by BaseKENT (@basekent) on CodePen.
調整方法
- 変形の強度:
@keyframes内のscaleX(1.2)やscaleY(0.85)の値を大きくするほど激しく変形します。1.15/0.9で控えめ、1.3/0.75で大きく潰れます - アニメーション時間:
animation: jelly 0.6sの秒数を変えることで変形の速さが変わります - カラー:
background: #9333ea（バイオレット系）をお好みの色に変更してください
Linear Spring（リニア・スプリング）
2024年から主要ブラウザで対応が完了したlinear()タイミング関数を使って、物理的なバネの挙動を精密に再現したボタンです。linear()は数値を多点指定できるため、「少し行き過ぎる→少し戻る→また少し行き過ぎる→…」という減衰振動を細かくコントロールできます。cubic-bezierでは表現しにくかった「自然な物理感」を、CSSだけで実現できる2024年型の実装です。Basic Springがシンプルさ優先なのに対し、こちらはより自然な振動感が欲しいときの選択肢です。
グリーン系のカラーで整えており、確認・完了・送信系のCTAボタンとの相性が良いです。「ちゃんと動いている」という信頼感のある演出として使いやすいです。
See the Pen Linear Spring by BaseKENT (@basekent) on CodePen.
調整方法
- バウンスの調整:
linear()内の数値列のうち、1.08付近の値がオーバーシュートのピークです。この値を大きくするほど大きく弾み、1.02程度に小さくするとより自然な収束になります - アニメーション全体の速さ:
transition: transform 0.6sの秒数を変更してください - カラー:
background: #16a34a（グリーン系）をブランドカラーに変更してください
Wobble Return（ウォブル・リターン）
ホバー時に左右にゆっくり揺れながら収束するボタンです。scaleとrotateを組み合わせた@keyframesで「少し傾きながら膨らみ、振動が減衰して落ち着く」動きを作っています。Basic Springの「拡大してバウンス」とは異なり、「左右に首を振りながら戻る」という独特のキャラクターを持ちます。
レッド系のカラーで設計しており、注意喚起・削除・警告系のボタンに使うと「このボタンは要注意だよ」という視覚的なメッセージとして機能します。コミカルなキャラクター系サイトや、ユーザーに印象を残したいUI演出にも使いやすいです。
See the Pen Wobble Return by BaseKENT (@basekent) on CodePen.
調整方法
- 揺れの大きさ:
@keyframes内のrotate(-4deg),rotate(3deg)の角度を大きくするほど激しく揺れます。±2degで穏やか、±8degで大きく揺れます - アニメーション時間:
animation: wobble-return 0.8sを長くするとゆっくり収束し、短くすると素早く収まります - カラー:
background: #e11d48（レッド系）をお好みのブランドカラーに変更してください
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
