Like Heart Burst

<!-- Like Heart Burst · NedDev · eigen werk. -->
<div class="jouw-container">
<button class="lhb-btn" aria-pressed="false"><svg class="lhb-heart" viewBox="0 0 24 24" width="26" height="26"><path d="M12 21s-7-4.5-9.5-8.5C.8 9.6 2.3 6 5.5 6 7.4 6 9 7.2 12 10c3-2.8 4.6-4 6.5-4 3.2 0 4.7 3.6 3 6.5C19 16.5 12 21 12 21z"/></svg><span class="lhb-count">128</span></button>
</div>

/* Like Heart Burst · NedDev · eigen werk. */
.lhb-btn{position:relative;display:inline-flex;align-items:center;gap:9px;padding:11px 18px;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:30px;cursor:pointer;font-family:'Switzer',sans-serif;font-size:15px;font-weight:600;color:#0a0a0a}
.lhb-heart{fill:rgba(10,10,10,.18);transition:transform .25s,fill .25s}
.lhb-btn.lhb-on .lhb-heart{fill:#F5480F;animation:lhb-beat .4s ease}
@keyframes lhb-beat{0%{transform:scale(1)}30%{transform:scale(.7)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
.lhb-spark{position:absolute;left:24px;top:50%;width:6px;height:6px;border-radius:50%;background:#F5480F;pointer-events:none;opacity:0}
.lhb-spark.go{animation:lhb-fly .55s ease-out forwards}
@keyframes lhb-fly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}

// Like Heart Burst · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.lhb-btn')||root;var cnt=root.querySelector('.lhb-count'),base=128;root.addEventListener('click',function(){var on=root.classList.toggle('lhb-on');root.setAttribute('aria-pressed',on);cnt.textContent=base+(on?1:0);if(on){for(var i=0;i<8;i++){(function(a){var s=document.createElement('span');s.className='lhb-spark';var ang=a/8*6.28,dist=26+Math.random()*16;s.style.setProperty('--dx',Math.cos(ang)*dist+'px');s.style.setProperty('--dy',Math.sin(ang)*dist+'px');root.appendChild(s);requestAnimationFrame(function(){s.classList.add('go');});setTimeout(function(){s.remove();},600);})(i);}}});
}
init(document.querySelector('.jouw-container'));