リップル波紋ボタン

解説

リップル波紋ボタンは、クリックした地点から円い波紋が広がる、押した手応えが伝わるボタンです。この実装は CSS と JavaScript の合わせ技です。クリック位置を getBoundingClientRect で計算し、その場所に span を生成。CSS の @keyframes で scale(4) まで拡大しながら opacity を消していき、波が広がって消える動きを作ります。ボタン本体には overflow:hidden を当てて、はみ出した波紋を縁で切り取っています。生成した span は setTimeout で後始末して残しません。

使う場面

• 送信・申し込みなど主要な操作ボタン
• マテリアルデザイン調の UI に合わせたいとき
• タップに反応する感触を増やしたいモバイル UI

波紋の色は .rp span の background、広がる速さは animation の秒数で調整します。クリック位置から発生するため、押した場所に応じて波の中心が変わるのが特徴です。毎クリックで要素を生成しますが直後に削除するため蓄積はしません。動きを抑えたい利用者には prefers-reduced-motion で波紋を控えると親切です。

使用例・適したシーン

• クリエイティブポートフォリオ
• アートディレクション系
• ブランドサイト