こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
「マウスを乗せたときに、ボタンの文字が変わる」
ちょっとした演出ですが、ユーザーの視線を惹きつけたり、アクションを後押ししたりと、Webサイトの体験向上に効果的なアイデアですよね。
しかもこの演出、JavaScriptを使わずにCSSだけで実装できるのをご存知ですか？
ちょっと工夫すれば、ボタンのテキストを動的に切り替えるようなUXが、ほんの数行のCSSで実現できちゃいます。
今回は、「CSSだけでホバー時にボタンのテキストを変える」テクニックを、実用的なコード付きでご紹介します。
誰でもコピペですぐに使える内容です！
基本の考え方：テキストを2つ重ねて切り替える
CSSでは「contentの書き換え」や「innerTextの変更」はできないため、
ホバー時にテキストを変えるには、2つのテキストをHTMLであらかじめ用意して、CSSで表示・非表示を切り替えるというアプローチを取ります。
- 通常時：テキストAを表示、テキストBを非表示
- ホバー時：テキストAを非表示、テキストBを表示
という切り替えです。
実装例①：上下に切り替わるテキスト
HTML
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このように、上下にテキストがスライドする形で表示が切り替わります。
ボタンをクリックさせるためのコピーをホバー時に目立たせるという目的に最適です。
実装例②：フェードでふわっと切り替える
上記の応用として、位置を変えずにフェードイン・アウトで切り替える方法もあります。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
ふんわりと印象的な演出ができ、女性向けやナチュラル系のサイトとも相性が良いです。
レスポンシブにも対応OK！
今回の方法は、テキスト部分に white-space: nowrap を加えることで、文字の折り返しを防止し、
さらに transform を使って中央寄せしているため、デバイスサイズに関係なく安定した表示が可能です。
もちろん、フォントサイズや余白などをメディアクエリで調整すれば、スマホでも美しく表示できます。
まとめ：たった数行で「お、いいな」と思わせるボタン演出
ボタンは、Webサイトの中でも「行動を促す」ために最も重要なUIのひとつ。
だからこそ、「押したくなる」「触れたくなる」デザインは、ほんの少しの工夫で生まれます。
CSSだけで実装できるこの「テキストが変わる演出」は、軽量・簡単・視覚的にわかりやすいの三拍子が揃った便利なテクニック。
Webデザインにちょっとしたインタラクションを加えたいとき、
ぜひ今回のテクニックを活用してみてください！
satokotadesignキャンペーン実施中！
