Ripple Effect

<button class="rip" id="ripbtn">Tap</button>

.fx-dot{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 18%,transparent),0 2px 6px rgba(0,0,0,.3);
  pointer-events:none;z-index:9999;transition:opacity .25s}
.rip{position:relative;overflow:hidden;padding:18px 34px;border:none;border-radius:10px;background:var(--accent);
  color:#fff;font-weight:700;font-size:clamp(12px,3.8vmin,15px);cursor:pointer}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);
  animation:rippleAnim .7s ease-out forwards;pointer-events:none}
@keyframes rippleAnim{to{transform:scale(1);opacity:0}}

const fxDot=document.createElement('div');fxDot.className='fx-dot';document.body.appendChild(fxDot);
let fxAuto=true,fxX=innerWidth/2,fxY=innerHeight/2;
function fxHide(){fxDot.style.opacity='0';}
addEventListener('pointerdown',()=>{fxAuto=false;fxHide();},{capture:true});
addEventListener('pointermove',e=>{fxAuto=false;fxHide();fxX=e.clientX;fxY=e.clientY;},{capture:true});
function fxWalk(x,y,ms){
  return new Promise(res=>{
    const sx=fxX,sy=fxY,start=performance.now();
    function step(now){
      if(!fxAuto)return res();
      const p=Math.min(1,(now-start)/ms),e=1-Math.pow(1-p,3);
      fxX=sx+(x-sx)*e;fxY=sy+(y-sy)*e;
      fxDot.style.transform='translate('+fxX+'px,'+fxY+'px)';
      if(p<1)requestAnimationFrame(step);else res();
    }
    requestAnimationFrame(step);
  });
}
function fxWait(ms){
  return new Promise(res=>{
    const start=performance.now();
    function step(now){ if(!fxAuto)return res(); if(now-start<ms)requestAnimationFrame(step);else res(); }
    requestAnimationFrame(step);
  });
}

const btn=document.getElementById('ripbtn');
function makeRipple(x,y){
  const r=btn.getBoundingClientRect();
  const size=Math.max(r.width,r.height)*2;
  const s=document.createElement('span');
  s.className='ripple';
  s.style.width=s.style.height=size+'px';
  s.style.left=(x-r.left-size/2)+'px';
  s.style.top=(y-r.top-size/2)+'px';
  btn.appendChild(s);
  s.addEventListener('animationend',()=>s.remove());
}
btn.addEventListener('pointerdown',e=>{ fxAuto=false; fxHide(); makeRipple(e.clientX,e.clientY); });
async function autoSeq(){
  while(fxAuto){
    const r=btn.getBoundingClientRect();
    const tx=r.left+r.width*(0.3+Math.random()*0.4);
    const ty=r.top+r.height/2;
    await fxWalk(tx,ty,500); if(!fxAuto) break;
    makeRipple(tx,ty);
    await fxWait(1000);
  }
}
autoSeq();