文字が 1 つずつジャンプするボタン
このボタンは、ホバーするとラベルの各文字が時間差で順番に跳ねる遊び心のある部品です。文字を 1 つずつ span で囲み、 nth-child でそれぞれに transition-delay を 0.06 秒刻みでずらして、ホバー時に translateY(-8px) で上へ跳ねさせています。
解説
このボタンは、ホバーするとラベルの各文字が時間差で順番に跳ねる遊び心のある部品です。文字を 1 つずつ span で囲み、nth-child でそれぞれに transition-delay を 0.06 秒刻みでずらして、ホバー時に translateY(-8px) で上へ跳ねさせています。transition には強めに跳ねる cubic-bezier を使い、波打つように文字が連続して飛ぶアニメーションを CSS だけで作っています。
使う場面
- キッズ向け・知育サービスの楽しい「はじめる」ボタン
- インディーブランドやポップなキャンペーンの CTA
- ゲームやイベントの参加ボタンで親しみを出したい場面
文字を増減するときは span の数を変え、それに合わせて nth-child の指定も追加・削除します。波のスピードは transition-delay の刻み幅で、跳ねる高さは translateY の値で調整できます。1 文字ずつ span に分けると読み上げで不自然になることがあるため、aria-label でボタン全体の文言を補っておくと親切です。動きを抑えたい利用者向けに prefers-reduced-motion での無効化も検討します。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
文字数を増やしても動きますか
動きますが、文字ごとに span で囲み、nth-child の指定を文字数分そろえる必要があります。文字を増やしたら対応する nth-child と transition-delay を追加してください。
跳ねる速さや高さを変えられますか
波打つ速さは各文字の transition-delay の刻み幅で、跳ねる高さは translateY の値で調整できます。刻みを小さくすると一斉に近づき、大きくすると波がゆっくり流れます。