波紋（リップル）エフェクトボタン
クリックした その位置 から白い波紋がふわっと広がる、Material Design でおなじみのフィードバック表現です。仕組みは、クリックイベントで getBoundingClientRect() からボタン内のタップ座標を計算し、その場所に span を動的に挿入。
解説
クリックしたその位置から白い波紋がふわっと広がる、Material Design でおなじみのフィードバック表現です。仕組みは、クリックイベントで getBoundingClientRect() からボタン内のタップ座標を計算し、その場所に span を動的に挿入。CSS の @keyframes で scale(0) から scale(4) まで拡大しながら透明にし、終わったら JavaScript で要素を削除します。ボタンには overflow:hidden が効いていて、波紋が枠からはみ出さないようになっています。
活かせる場面
- スマホ向けアプリで「タップが効いた」ことを明確に伝えたいとき
- 申込・購入など、押した手応えを残したい重要ボタン
- Material UI のトーンに揃えたい管理画面
波紋の色は rgba(255,255,255,.5) の部分で、濃さも変えられます。広がる速さは animation:ripple .6s の秒数で調整します。注意点として、この演出は JavaScript が必須です。連打で span が増え続けないよう、サンプルでは 600ms 後に要素を remove() しています。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
波紋の色や大きさは変えられますか
色は CSS の rgba(255,255,255,.5) を別の色に書き換えれば変わります。広がる速さは animation:ripple の .6s を増減し、最終的な大きさは @keyframes 内の scale(4) の値で調整できます。
JavaScript は必須ですか
はい。クリック位置を取得して波紋の要素を差し込む処理に JavaScript を使うため必須です。座標計算が不要なら CSS だけのホバー演出で代替する方法もあります。