タップした瞬間、波が広がる。CSSボタンデザイン「リップル」5選

2026年3月20日

当ページのリンクには広告が含まれています。

Googleが広めたMaterial Designには、ボタンをタップした瞬間に波紋が広がる「リップルエフェクト」があります。「押した」というフィードバックが目に見えることで、操作が気持ちいい。それだけでなく、ページやアプリへの信頼感まで上がってしまうのが不思議なところです。

従来この波紋は、JavaScriptでクリック座標を取得しその位置から広がらせるのが定石でした。ただ、CSSだけでも「ボタン中央から波紋が広がる」パターンは十分に実装できます。この記事では、JavaScriptを一切使わずCSSの::after疑似要素と@keyframesのみで実装したリップルボタンを5本紹介します。WordPressやSWELLのカスタムCSSにそのままコピーして使えます。

中央から静かに広がる基本形：Center Ripple

5px起点の円（::after）をホバー時にscale(30)まで拡大しながら透明にするシンプルな実装です。overflow: hiddenでボタン枠外に波紋が出ないように収めています。アニメーション時間は0.6sで、じっくり広がる印象を与えます。リップルの基本形がこれ。まず1本だけ選ぶなら、このCenter Rippleを試してください。

背景が単色のシンプルなボタンに最も合います。CTAボタン・ナビゲーション・フォームの送信ボタンまで、幅広い場面で使いやすい汎用性の高いデザインです。

See the Pen Center Ripple by BaseKENT (@basekent) on CodePen.

調整方法

波紋の色: rgba(255, 255, 255, 0.5) のアルファ値で透明度を調整。薄くすると控えめな印象に
広がり速度: 0.6s を 0.4s に縮めるとシャープに、0.9s に伸ばすとゆったりした印象に
ボタン色: background: #5c6bc0 をお好みのカラーに変更してください

一瞬で消える、シャープなリップル：Instant Ripple

0.3sという速いアニメーション時間とease-outのイージングで、素早く広がって消える鋭いリップルです。Center Rippleが「じわっと広がる」のに対して、こちらは「パッと広がってスッと消える」印象。動きの主張が少ないので、インターフェースの中でボタンが目立ちすぎず、それでも操作フィードバックはしっかり伝えてくれます。

スッキリしたUIデザインのページや、ボタン数が多い管理画面・フォームページに向いています。ダーク系背景に赤いボタンの組み合わせはシャープな印象で、登録・決済系CTAに使いやすいです。

See the Pen Instant Ripple by BaseKENT (@basekent) on CodePen.

調整方法

速さ: 0.3s がこのデモの要です。0.5s 以上にするとCenter Rippleに近い雰囲気になります
透明度: rgba(255, 255, 255, 0.6) の数値を上げると波紋が強調されます（最大1.0まで）
ボタン色: 背景色が濃いほど白い波紋が際立ちます

グラデーションに乗るやわらかな波：Color Wave

グラデーション背景のボタンに、白い半透明の波紋を組み合わせたデザインです。0.7sのゆっくりした展開で、80%時点まで半透明を保ちながら最後だけ急速に消えることで「じわっとした余韻」を演出しています。グラデーション色の上に白波紋が乗ることで、動きに深みが出ます。

ランディングページのメインCTAや、色味を重視するファッション系・コスメ系サイトのボタンに向いています。linear-gradientの方向と色を変えるだけで印象が大きく変わるのが、このデザインの汎用性です。

See the Pen Color Wave by BaseKENT (@basekent) on CodePen.

調整方法

波紋の透明度: rgba(255, 255, 255, 0.4) を上げると波紋が強く目立ちます。下げると背景グラデーションに溶け込みます
グラデーション: linear-gradient(135deg, #f093fb, #f5576c) の角度と色を変えてください
余韻の長さ: @keyframes の 80% キーフレームを削除すると、最後まで一定速度で消えていきます

ライト系ボタンに馴染む暗い波紋：Dark Ripple

白いボタン・薄いグレーのボタンには、白い波紋では見えません。波紋をrgba(0, 0, 0, 0.15)の半透明黒にすることで、ライト系ボタンでも視認できる波紋を実現したのがこのデザインです。アニメーション構造はCenter Rippleと同じですが、ライトトーンのページにそのまま使える点が違います。

コーポレートサイト・医療・教育系など、カラーを抑えたデザインのページに向いています。「リップルを使いたいが、白い波紋では見えない」という場面の解決策として手元に置いておきたいパターンです。

See the Pen Dark Ripple by BaseKENT (@basekent) on CodePen.

調整方法

波紋の濃さ: rgba(0, 0, 0, 0.15) の数値を上げると波紋が濃くなります。0.2〜0.25 程度が自然な視認性のバランス
ボタン色: グレー以外でも、白・パステルカラーのボタンにも使えます
アニメーション時間: 0.6s を 0.5s に短縮すると引き締まった印象になります

発光が外側へ広がるグロー波紋：Glow Ripple

波紋が内側から広がるのではなく、ボタン自体を取り囲む光の輪（box-shadow）が外側に広がるバリエーションです。box-shadow: 0 0 0 0 rgba(カラー, 0.8) から 0 0 0 20px rgba(カラー, 0) へのアニメーションで、ボタン外周が光りながら消えていく視覚効果を作っています。::afterではなくボタン自体のbox-shadowを動かすため、コードがとくにシンプルです。

他の4本が「ボタン内部で完結する波紋」なのに対して、こちらは「外側に光が放出される」印象が特徴。ダーク系背景でネオン系のアクセントカラーと組み合わせると特に映えます。「ボタンの存在感を強調したい」場面に向いているデザインです。

See the Pen Glow Ripple by BaseKENT (@basekent) on CodePen.

調整方法