リップルエフェクトボタン

解説

ボタンをクリックした位置から波紋が広がる「リップルエフェクト」です。マテリアルデザイン風の触感を、軽いJavaScriptとCSSアニメーションだけで再現しています。クリックされた座標を getBoundingClientRect でボタン内の相対位置に変換し、その地点を中心に円の span を生成。CSSの @keyframes で scale を大きくしながら opacity を0にして消し、アニメーション後は setTimeout で要素を取り除いてDOMをきれいに保ちます。

使う場面

• 送信やCTAなど「押した実感」を出したいボタン
• アプリ風のタップフィードバックが欲しいUI
• シンプルなボタンに一手間の動きを足したい時

波紋の色は rgba(255,255,255,.35)、広がる速さは animation:rpl .5s で調整します。ボタン側に overflow:hidden が必要で、これで円が枠からはみ出さずに収まります。複数回連打しても都度生成・削除するので破綻しません。注意点として、動きを抑えたい利用者のために prefers-reduced-motion の時は波紋を出さない分岐を足すとより丁寧です。クリック領域は十分な大きさを確保し、押し心地と分かりやすさを両立させましょう。

使用例・適したシーン

• お問い合わせフォームの送信ボタン
• 資料ダウンロードの CTA
• ヒーローセクションの主要 CTA
• サブスク・申込ボタン