주스 (juice)

<div class="jrow">
<div class="jcol"><div class="jlabel">PLAIN</div><button class="jbtn plain" id="pbtn">HIT</button></div>
<div class="jcol"><div class="jlabel">JUICED</div><div class="jstage"><div class="jparticles" id="jp"></div><button class="jbtn juicy" id="jbtn">HIT</button></div></div>
</div>

.jrow{display:flex;gap:clamp(10px,5vmin,26px);align-items:center;justify-content:center;width:100%}
.jcol{display:flex;flex-direction:column;align-items:center;gap:6px}
.jlabel{font:700 clamp(8px,2.4vmin,10px) monospace;color:var(--muted);letter-spacing:.1em}
.jbtn{border:none;border-radius:10px;padding:clamp(10px,4.4vmin,16px) clamp(14px,5.6vmin,22px);font:800 clamp(11px,3.4vmin,14px) inherit;cursor:default;color:#fff}
.plain{background:var(--muted)}
.juicy{background:var(--accent-2);position:relative;z-index:2;box-shadow:0 8px 18px color-mix(in srgb,var(--accent-2) 35%,transparent)}
.jstage{position:relative}
.jparticles{position:absolute;inset:-60%;pointer-events:none}
.jp{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--accent-3);left:50%;top:50%;opacity:0}

const pbtn=document.getElementById('pbtn');
const jbtn=document.getElementById('jbtn');
const jp=document.getElementById('jp');
pbtn.style.transition='transform .05s';
jbtn.style.transition='transform .09s cubic-bezier(.3,1.6,.4,1), background .15s';
function plainHit(){
  pbtn.style.transform='scale(0.96)';
  setTimeout(function(){ pbtn.style.transform='scale(1)'; }, 90);
}
function burst(){
  for(let i=0;i<8;i++){
    const p=document.createElement('div');
    p.className='jp';
    jp.appendChild(p);
    const ang=(i/8)*Math.PI*2, dist=26+Math.random()*14;
    p.style.transition='transform .45s ease-out, opacity .45s ease-out';
    requestAnimationFrame(function(){
      p.style.opacity='1';
      p.style.transform='translate('+(Math.cos(ang)*dist)+'px,'+(Math.sin(ang)*dist)+'px)';
      setTimeout(function(){ p.style.opacity='0'; }, 200);
    });
    setTimeout(function(){ p.remove(); }, 500);
  }
}
function juicyHit(){
  jbtn.style.transform='scale(0.8) rotate(-3deg)';
  jbtn.style.background='var(--accent-3)';
  burst();
  setTimeout(function(){
    jbtn.style.transform='scale(1.12) rotate(2deg)';
    setTimeout(function(){
      jbtn.style.transform='scale(1)';
      jbtn.style.background='var(--accent-2)';
    }, 110);
  }, 70);
}
function loop(){ plainHit(); juicyHit(); setTimeout(loop, 1300); }
setTimeout(loop, 500);