Ripple Button

1function RippleButton() {
2  const [ripples, setRipples] = React.useState([]);
3  const add = (e) => {
4    const r = e.currentTarget.getBoundingClientRect();
5    const id = Date.now();
6    setRipples((rs) => [...rs, { id, x: e.clientX - r.left, y: e.clientY - r.top }]);
7    setTimeout(() => setRipples((rs) => rs.filter((x) => x.id !== id)), 600);
8  };
9  return (
10    <button onClick={add} style={{position:'relative',overflow:'hidden',padding:'14px 34px',border:0,borderRadius:14,
11      background:'linear-gradient(135deg,#8b5cf6,#06b6d4)',color:'#fff',font:'600 15px system-ui',cursor:'pointer'}}>
12      Klick mich
13      {ripples.map((r) => (
14        <span key={r.id} style={{position:'absolute',left:r.x,top:r.y,width:8,height:8,borderRadius:'50%',
15          background:'rgba(255,255,255,.6)',transform:'translate(-50%,-50%)',animation:'rp .6s ease-out'}} />
16      ))}
17      <style>{'@keyframes rp{to{width:220px;height:220px;opacity:0}}'}</style>
18    </button>
19  );
20}