テキスト入替ホバー
テキスト入替ボタンは、ラベルの <span> に ::after 疑似要素で2つ目の文言（ data-hover 属性の値）を真下に控えさせ、ホバー時に translateY(-100%) でまとめて上へスライドさせる切替アニメです。現在の文字が上に消えると同時に、控えていた新しい文字が下から現れます。
解説
テキスト入替ボタンは、ラベルの <span> に ::after 疑似要素で2つ目の文言（data-hover 属性の値）を真下に控えさせ、ホバー時に translateY(-100%) でまとめて上へスライドさせる切替アニメです。現在の文字が上に消えると同時に、控えていた新しい文字が下から現れます。overflow:hidden がボタン枠で文字をクリップしているため、行き来する2つのラベルがきれいに入れ替わって見えます。文言は HTML の data-hover に書くだけで、JavaScript は不要です。
こんな場面で
- 「View Details → Click Me!」のような気の利いた CTA
- 状態やニュアンスを言葉で変えたいボタン
- ブランドサイトの遊び心あるインタラクション
2つ目の文言は data-hover の値を書き換えるだけで変更でき、HTML を触らず CSS の構造はそのまま使えます。切替の速さは transition の .35s で調整。2行ぶんが収まる高さと min-width の確保が崩れ防止の鍵です。長すぎる文言は折り返してずれるため、上下のラベルは近い長さに揃えると安定します。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
ホバー時に表示する文言はどこで変えますか
HTML の span に付いている data-hover 属性の値を書き換えるだけで、ホバー後に現れる文言を変更できます。CSS はその属性値を ::after で読み込んでいるため、構造を触らずにラベルだけ差し替えられます。
文言が長いとレイアウトが崩れますか
上下2つのラベルが入れ替わる構造なので、極端に長い文言は折り返して位置がずれることがあります。min-width を確保しつつ、入替前後の文字数を近い長さに揃えると安定して表示されます。