ホバーしたとき、ボタンのテキストそのものが動いたら——それだけで印象はがらりと変わります。「Button」が「Click Me」に滑り込んだり、フェードで入れ替わったり、3D回転で裏返ったり。文字が変化する演出は、背景やボーダーを動かすのとは違う「コンテンツ自体が変わる」驚きがあります。CTAボタンをホバーしたときに、テキストまで反応するサイトは思いのほか少ないため、それだけで差別化になります。
この記事では、::before / ::after 疑似要素・transform・opacity・perspectiveなどを組み合わせたテキスト変化ボタンを5本紹介します。多くのデモでHTMLの data-text 属性に設定した値をCSSの content: attr(data-text) で読み取り、テキストを入れ替える仕組みを使っています。JavaScriptなしで動き、コピペでそのまま使えます。WordPress / SWELLのカスタムCSSにも対応しています。
Slide Up Replace（スライド・アップ・リプレイス）
ホバーした瞬間、表示中のテキストが上に滑り出し、代わりに新しいテキストが下から滑り込んでくるアニメーションです。overflow: hiddenでボタン枠に収め、::before（元テキスト）と::after（置き換えテキスト）をtransform: translateYでずらすだけのシンプルな実装ですが、「スロットが回るような」滑らかさがあります。
HTML側の data-text 属性に置き換えテキストを書くだけで差し替えられるので、「詳しく見る」→「Let’s Go！」のように意味のある変化を設定しやすい。ポートフォリオのナビゲーション・テキスト系LPのメインCTAに向いています。
See the Pen Slide Up Replace by BaseKENT (@basekent) on CodePen.
調整方法
- 置き換えテキスト: HTML側の
data-text="Click Me"の値を変えてください。ここが置き換え後に表示されるテキストです - スライド速度:
transition: 0.3s easeの数値を大きくするとゆっくり、小さくすると素早いスライドになります - 背景色:
#5c6bc0をブランドカラーに変更してください
Fade Switch（フェード・スウィッチ）
元のテキストがじわっと消え、同じ位置に別のテキストがフェードインする演出です。Slide Up Replaceと違い、上下の動きがないため、落ち着いた印象でテキストが入れ替わります。::beforeがopacity: 1 → 0で消え、::afterがopacity: 0 → 1で現れる。構造は単純ですが、2つのopacityが時差なく同時に動くため、メッセージがシームレスに切り替わる感覚になります。
コーポレートサイト・サービスLPなど、動きを控えめにしたい場面に向いています。「Contact」→「Let’s Talk」のようにニュアンスを変える使い方でも馴染みます。WordPressの「続きを読む」や「お問い合わせ」ボタンにそのまま組み込める汎用性の高さが特長です。
See the Pen Fade Switch by BaseKENT (@basekent) on CodePen.
調整方法
- フェード速度:
transition: opacity 0.3s easeの数値を変えます。0.6sにするとゆっくりとした切り替わりに - 置き換えテキスト:
data-text="Go!"の値を変更してください - 背景色:
#26a69aを変えると全体のカラーが変わります
Char Spread（チャー・スプレッド）
ホバーすると文字と文字の間隔がゆっくりと広がり、テキストがゆったりとした雰囲気に変化します。テキストを入れ替えるのではなく「同じ文字が広がる」という、5本の中でもっとも実装がシンプルなデモです。letter-spacingをtransitionするだけで完成します。
ラグジュアリー系・ブランド系のイメージが強いテクニックですが、ナビゲーションリンクやセクション見出し横のボタンにも使いやすい。シンプルなアウトラインボタンと組み合わせると、ミニマルなデザインのまま動きが加わります。逆に、丸みのある塗りボタンより、角ばったボーダーボタンとの相性が良いため、そちらで試してみてください。
See the Pen Char Spread by BaseKENT (@basekent) on CodePen.
調整方法
- 広がり幅:
letter-spacing: 0.35emの値を小さくすると控えめ、大きくすると大きく広がります。0.5em以上にするとテキストが端に近づくため、paddingも合わせて広げてください - 速度:
transition: 0.4s easeの数値で変わります。0.6sにするとより優雅な広がりに - 文字スタイル:
text-transform: uppercaseを削除すると小文字のままでの広がりになります
Flip Text（フリップ・テキスト）
テキストが3D回転で奥に倒れ、別のテキストが手前に現れるアニメーションです。perspectiveとrotateXを組み合わせた実装で、::beforeが底辺を軸に後方へ90度倒れると同時に、::afterが上辺を軸に前面に倒れてきます。「ページをめくる」「看板がひっくり返る」ような立体感があります。
perspectiveの値を小さくするほど遠近感が強まり、大きな3D効果が出ます。動きのある表現を好むクリエイティブ系・エンタメ系サイトのナビゲーションやCTAに向いています。HTML側の data-text 属性を変えるだけで、ホバー後のテキストを自由に設定できます。
See the Pen Flip Text by BaseKENT (@basekent) on CodePen.
調整方法
- 遠近感の強さ:
.btn-flip-textのperspective: 400pxを小さくすると遠近感が増し、大きくするとフラットな回転になります。200pxでかなりダイナミックな3D感に - 置き換えテキスト:
data-text="Click Me"の値を変えてください - 回転速度:
transition: 0.4s easeの数値を変更。0.6sにするとゆっくりとした3D感に
Glow Text（グロウ・テキスト）
ホバーすると、テキスト自体が光を帯びて色が変化するエフェクトです。text-shadowの多重指定でネオンサインのようにテキストが輝き、border-colorも同時に変わることで、ボタン全体が発光しているように見えます。5本の中でもっとも実装がシンプルで、既存のボタンに数行追加するだけで動作します。
暗めの背景と組み合わせるとグロー感が際立ちます。ダーク系ポートフォリオ・テクノロジー系・音楽系サイトとの相性が良い。ライト系の背景では発光が目立ちにくくなりますが、その場合は text-shadow を省いてテキスト色の変化だけを残すと、明るいサイトにも馴染むシンプルなカラー変化ボタンとして使えます。ネオンが不要な場面でも、この「色だけ変えるパターン」として活用できます。
See the Pen Glow Text by BaseKENT (@basekent) on CodePen.
調整方法
- 発光色:
#00e5ffをお好みの色に変更してください。#ff6b6b（赤）や#69f0ae（グリーン）に変えるとまったく異なる印象になります - 発光の強さ:
text-shadowの0 0 40px rgba(...)の数値を大きくするほど広範囲に発光します。ライト系サイトで使う場合はtext-shadowを削除してカラー変化だけに絞るとスッキリします - 境界線の色:
border-color: rgba(0, 229, 255, 0.6)の値を発光色と揃えると統一感が出ます
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
