ボタンにカーソルを乗せた瞬間、背景色がスッと変わる。たったそれだけの動きが、サイト全体の印象をぐっと引き上げます。特にCTAボタンやお問い合わせリンクなど「クリックしてほしい要素」にホバーエフェクトを加えると、ユーザーの視線が自然とそこに集まり、操作可能であることを直感的に伝えられます。
この記事では、CSSだけで実装できるホバーエフェクト付きボタンを5つ紹介します。すべて::beforeやbox-shadowを活用したピュアCSSで、JavaScriptは不要。コピペしてすぐに使える形になっているので、WordPressやSWELLサイトにもそのまま導入できます。なお、ホバーエフェクトはPC操作が前提ですが、スマホではタップ時に同様の変化が起きるため、モバイルでも違和感なく機能します。
Slide Fill（スライド・フィル）
左から右へ、インクが染み込むようにベタ塗りが走る王道のホバーエフェクトです。::before疑似要素をボタンの背面に仕込み、通常時はleft: -100%で画面外に隠しておきます。ホバーするとleft: 0に遷移し、背景色が一気に広がると同時にテキストが白く反転。シンプルながらも「クリックできる」ことを強く伝えるCTAボタンに最適です。
コーポレートサイトのメインビジュアル下に置くアクションボタンや、LPの申し込みボタンなど、あらゆる場面で使いやすい万能型。迷ったらまずこれを試してみてください。
See the Pen Slide Fill by BaseKENT (@basekent) on CodePen.
調整方法
- 塗りの色:
::beforeのbackground: #333をサイトのメインカラーに変更してください。ボーダーとcolorの初期値も同じ色に揃えると統一感が出ます。 - アニメーション速度:
transition: 0.4sの数値を0.6sにするとゆったりした動きに、0.2sにするとキレのある高速スライドになります。 - 角丸:
border-radius: 30pxを追加すると、丸みのあるピルボタンに変わります。
Inset Shadow（インセット・シャドウ）
box-shadow: insetプロパティだけで背景を塗り替える、HTMLの追加要素が一切不要なテクニックです。通常時は影のサイズが0で見えませんが、ホバーするとinset 0 -100px 0 0に変化し、下から上へ色が満ちてくるような動きが生まれます。
疑似要素を使わないため、既存のボタンに後付けしやすいのが最大の利点。テーマのCSSをあまり触りたくないWordPressサイトや、既にデザインが固まっているクライアントワークの微調整に重宝します。深い緑の落ち着いたトーンは、ビジネス系サイトやポートフォリオに好相性です。
See the Pen Inset Shadow by BaseKENT (@basekent) on CodePen.
調整方法
- 塗りの色:
box-shadowとborder、colorの#1a6b4fを好みの色に統一してください。ネイビー（#2c3e50）やワインレッド（#8e2c3b）に変えるだけで印象がガラリと変わります。 - 塗りの方向:
inset 0 -100pxをinset 0 100pxにすると上から下に、inset 100px 0にすると左から右に変更できます。 - 速度:
transition: 0.4sの値で調整。easeの代わりにease-in-outを使うと、加減速のある自然な動きになります。
Split Reveal（スプリット・リヴィール）
上下から同時にカバーが閉じるように、::beforeと::afterの2つの疑似要素が中央に向かってスライドする挟み込み型のエフェクトです。通常のスライドフィルとは異なり、対称的な動きが生まれるため、視覚的なインパクトが一段上がります。
ファッションやアート系のサイト、ギャラリーの「View More」ボタンなど、デザイン性を重視したい場面にぴったり。パープルの配色がエレガントさを演出していますが、モノトーンに変えればどんなジャンルにも馴染みます。
See the Pen Split Reveal by BaseKENT (@basekent) on CodePen.
調整方法
- テーマカラー:
#5b2c8eをサイトカラーに変更してください。border、::before/::afterのbackground、初期colorの3箇所を統一するのがポイントです。 - 開閉の向き:
::beforeをtranslateX(-100%)、::afterをtranslateX(100%)に変えると、左右から閉じるバリエーションに切り替えられます。 - 速度:
transition: 0.4sを0.6sにするとゆっくり閉じる演出に。イベントサイトなどドラマチックな印象を出したいときにおすすめです。
Diagonal Wipe（ダイアゴナル・ワイプ）
斜めに切り込むようなワイプで背景が塗り替わる、動きに角度を加えたエフェクトです。::before疑似要素にskewX(-15deg)を加えることで、単なる水平スライドにはない躍動感が生まれます。
ポートフォリオサイトの「Works」ボタンやクリエイティブ系のCTAなど、少し遊び心を入れたい場面に向いています。赤系のアクセントカラーが目を引きますが、ダーク系の配色にすれば落ち着いた印象にまとめることも可能です。
See the Pen Diagonal Wipe by BaseKENT (@basekent) on CodePen.
調整方法
- ワイプの角度:
skewX(-15deg)の数値を変更すると斜めの傾きが変わります。-30degで急角度に、-5degでほぼ水平に近づきます。 - 色:
#c0392bを変更。ブルー（#2980b9）に変えるとクールな印象に、ブラック（#1a1a1a）でモード感のあるボタンになります。 - ワイプの方向:
translateX(-100%)をtranslateX(100%)にすると、右から左にワイプする逆方向バージョンになります。
Curtain Open（カーテン・オープン）
ホバーすると白いカバーが左右に開き、奥に隠れていたボタン本来の色が顔を出す、カーテンが開くような逆転のエフェクトです。通常は::beforeと::afterの白い前面で覆われた状態で、テキストはダークカラーで表示。ホバーすると::beforeが左へ、::afterが右へスライドして退場し、テキストが白に反転します。ポイントは親要素にz-index: 0を指定してスタッキングコンテキストを作ること。これにより疑似要素が背景の上・テキストの下に正しく配置されます。
他の4つとは考え方が逆で、「塗る」のではなく「剥がす」アプローチ。ギャラリーサイトの「ENTER」ボタンや、ティザーサイトの公開前カウントダウンなど、ドラマチックな演出が求められる場面で力を発揮します。
See the Pen Curtain Open by BaseKENT (@basekent) on CodePen.
調整方法
- カーテンの色:
::before/::afterのbackground: #ecf0f1がカーテン（前面）の色です。ページ背景と同じ色にすると、ボタンが「現れる」ような錯覚を作れます。 - ボタン本体の色:
background: #2c3e50が奥に隠れている色です。初期colorも同じ値に揃えてください。ブランドカラーを設定すれば、カーテンが開いた瞬間の印象が強まります。 - 速度:
transition: 0.4sを0.3sにするとパッと素早く開き、0.8sにするとゆっくりと開帳する演出になります。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
