バウンスホバーボタン
バウンスホバーボタンは、マウスを乗せた瞬間にボタンが縦へ小さく弾む、親しみやすい印象のボタンです。動きは @keyframes bounce で定義され、 translateY を 0 →-10px →-4px と段階的に動かして、跳ねて少し沈む自然なバウンドを表現しています。
解説
バウンスホバーボタンは、マウスを乗せた瞬間にボタンが縦へ小さく弾む、親しみやすい印象のボタンです。動きは @keyframes bounce で定義され、translateY を 0 →-10px →-4px と段階的に動かして、跳ねて少し沈む自然なバウンドを表現しています。cubic-bezier(.36,1.7,.44,1.4) という勢いのあるイージングを使うことで、機械的でない弾力を出しているのがポイントです。アニメーションはホバー時のみ 0.5s 一回だけ再生され、常時動き続けないため主張が強すぎません。CSS のみで JavaScript は不要です。
使う場面
- キッズ向け・エンタメ・カフェなど柔らかい雰囲気のサイト
- 遊び心のある CTA や、楽しさを伝えたい申込ボタン
- 堅すぎない印象にしたいキャンペーン導線
跳ねる高さは @keyframes 内の translateY の値(初期 -10px)で調整します。弾みの強さは cubic-bezier の数値で変わり、跳ねの速さは .5s の時間で決まります。色は background、丸みは border-radius で自由に変えられます。動きが苦手なユーザー向けに、prefers-reduced-motion でホバーアニメーションを抑える指定を足すとより配慮の行き届いた実装になります。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
跳ねる高さや速さを変えられますか？
跳ねる高さは @keyframes bounce 内の translateY の値(初期 -10px)で調整します。跳ねの速さはホバー時に指定している animation の時間(初期 0.5s)で変わり、値を小さくすると素早く弾みます。
アニメーションはずっと動き続けますか？
いいえ。バウンスはマウスを乗せたホバー時に一度だけ再生され、常時は動きません。動きが苦手なユーザー向けに prefers-reduced-motion で動きを抑える指定を追加すると、より親切な実装になります。