ハートいいねボタン

<button class="d08-03-01-btn" type="button" aria-label="いいね">
          <svg viewBox="0 0 24 24" width="40" height="40" aria-hidden="true">
            <path class="d08-03-01-heart" d="M12 21s-7.5-4.8-10-9.2C.6 9 1.6 5.5 4.8 4.8 7 4.3 8.9 5.5 12 8.4c3.1-2.9 5-4.1 7.2-3.6C22.4 5.5 23.4 9 22 11.8 19.5 16.2 12 21 12 21z"/>
          </svg>
          <span class="d08-03-01-label">いいね</span>
        </button>

.d08-03-01-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid #e2e2e8;border-radius:999px;padding:10px 18px;cursor:pointer;font-size:14px;color:#555;position:relative;transition:border-color .2s,box-shadow .2s}
        .d08-03-01-btn:hover{border-color:#ff5470;box-shadow:0 4px 14px rgba(255,84,112,.18)}
        .d08-03-01-btn svg{overflow:visible}
        .d08-03-01-heart{fill:#e2e2e8;transition:fill .2s}
        .d08-03-01-btn.is-on .d08-03-01-heart{fill:#ff5470}
        .d08-03-01-btn.is-on svg{animation:d08-03-01-pop .5s cubic-bezier(.2,1.4,.4,1)}
        @keyframes d08-03-01-pop{0%{transform:scale(1)}35%{transform:scale(1.35)}60%{transform:scale(.9)}100%{transform:scale(1)}}
        .d08-03-01-btn.is-on .d08-03-01-label{color:#ff5470}
        .d08-03-01-p{position:absolute;top:50%;left:22px;width:6px;height:6px;border-radius:50%;background:#ff5470;pointer-events:none;opacity:0}
        .d08-03-01-btn.is-on .d08-03-01-p{animation:d08-03-01-burst .6s ease-out forwards}
        @keyframes d08-03-01-burst{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}

(function(){
        var btn=document.querySelector('#item-08-03-01 .d08-03-01-btn');if(!btn)return;
        var angles=[[-28,-22],[0,-30],[28,-22],[-30,4],[30,4],[0,26]];
        btn.addEventListener('click',function(){
          btn.classList.remove('is-on');void btn.offsetWidth;
          btn.querySelectorAll('.d08-03-01-p').forEach(function(n){n.remove();});
          btn.classList.add('is-on');
          angles.forEach(function(a){var p=document.createElement('span');p.className='d08-03-01-p';p.style.setProperty('--dx',a[0]+'px');p.style.setProperty('--dy',a[1]+'px');btn.appendChild(p);});
        });
      })();