Like Button with Burst

<button class="like" id="like"><svg viewBox="0 0 24 24" width="32" height="32"><path class="like-h" d="M12 21s-7-4.5-9.5-9C.5 8 2.5 4 6 4c2 0 3.2 1.2 4 2.3C10.8 5.2 12 4 14 4c3.5 0 5.5 4 3.5 8-2.5 4.5-9.5 9-9.5 9z"/></svg><span class="like-n" id="likeN">128</span></button>

body{background:#f6f7fa}
.like{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e2e6ef;border-radius:999px;padding:12px 20px;cursor:pointer;font:700 16px/1 system-ui,sans-serif;color:#5a627a}
.like-h{fill:#d6dae6;transition:fill .2s}
.like.on .like-h{fill:#ff3b6b;animation:beat .4s ease}
.like.on{color:#ff3b6b}
@keyframes beat{0%,100%{transform:scale(1)}30%{transform:scale(1.4)}}
.like svg{overflow:visible}

var b=document.getElementById('like'),n=document.getElementById('likeN'),on=false;
b.onclick=function(){on=!on;b.classList.toggle('on',on);n.textContent=on?129:128;if(on)burst()};
function burst(){var svg=b.querySelector('svg');for(var i=0;i<6;i++){(function(i){var p=document.createElementNS('http://www.w3.org/2000/svg','circle');p.setAttribute('cx','12');p.setAttribute('cy','12');p.setAttribute('r','2');p.setAttribute('fill','#ff8fab');svg.appendChild(p);var a=i/6*Math.PI*2;p.animate([{transform:'translate(0,0)',opacity:1},{transform:'translate('+Math.cos(a)*18+'px,'+Math.sin(a)*18+'px)',opacity:0}],{duration:500,easing:'ease-out'});setTimeout(function(){p.remove()},500)})(i)}}