BUTTON

ボタンアニメーション大全 — ホバー・プレス・CTA演出

タッチデバイスはホバーがないため、:active（タップ中）のフィードバックを重視します。@media (hover: hover) でホバー演出を出し分けると安全です。

2026-06-03 公開 · Motion Lab

ボタンはサイトで最もクリックされる要素です。適切なアニメーションは「押せる」ことを直感的に伝え、クリック率（CVR）を高めます。本ガイドでは、ボタンアニメーションの代表パターンと設計の勘所を解説します。

ホバー — 「押せる」を伝える

ホバー時のわずかな変化（拡大・発光・色変化）は「これはボタンだ」という最重要シグナルです。transition で滑らかに。

:active で translateY させ、立体的な box-shadow を薄くすると「物理的に押した」感覚が生まれます。transition は 80ms 程度と短く。

クリック位置から波紋が広がる Material Design 由来の演出。タップ位置が明確で、モバイルとの相性が良い。

実装デモ：Ripple Effect

グラデーション・パルス（波紋）・発光で主要 CTA を際立たせます。ただし1画面に主役は1つに絞るのが鉄則。

ボタンアニメーションでCVRは上がる？

「押せる」ことが伝わり、フィードバックが返るとクリックの心理的ハードルが下がります。ただし過剰な動きは逆効果。主役CTAに絞って演出しましょう。

hover が効かないモバイルはどうする？

タッチデバイスはホバーがないため、:active（タップ中）のフィードバックを重視します。@media (hover: hover) でホバー演出を出し分けると安全です。

ボタンを目立たせすぎると？

ページ内に強い CTA が複数あると、ユーザーは何を押すべきか迷います。主役は1つ、副次アクションは控えめに。

transition と animation どちらで作る？

ホバー・プレスの状態変化は transition、パルスや波紋の繰り返しは animation（@keyframes）が適します。

※ Amazonアソシエイト・プログラム参加。リンク経由のご購入で運営者が紹介料を受け取る場合があります。