お気に入りトグル

<div class="d10-01-06-row">
          <button class="d10-01-06-fav" type="button" aria-label="お気に入り">
            <span class="d10-01-06-heart">♥</span>
          </button>
          <button class="d10-01-06-fav d10-01-06-star" type="button" aria-label="お気に入り">
            <span class="d10-01-06-heart">★</span>
          </button>
        </div>

.d10-01-06{background:#f6f7fb}
        .d10-01-06-row{display:flex;gap:36px}
        .d10-01-06-fav{position:relative;width:64px;height:64px;border-radius:50%;border:none;background:#fff;box-shadow:0 6px 18px rgba(30,40,80,.1);cursor:pointer;display:flex;align-items:center;justify-content:center}
        .d10-01-06-heart{font-size:30px;color:#cbd5e1;transition:color .2s,transform .2s}
        .d10-01-06-fav.d10-01-06-active .d10-01-06-heart{color:#ef4444;animation:d216bounce .5s ease}
        .d10-01-06-star.d10-01-06-active .d10-01-06-heart{color:#f59e0b}
        @keyframes d216bounce{0%{transform:scale(1)}30%{transform:scale(.7)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
        .d10-01-06-p{position:absolute;width:6px;height:6px;border-radius:50%;background:#ef4444;opacity:0;pointer-events:none;left:50%;top:50%}
        .d10-01-06-star .d10-01-06-p{background:#f59e0b}
        .d10-01-06-p.d10-01-06-burst{animation:d216burst .6s ease-out forwards}
        @keyframes d216burst{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.3)}}

(function(){
        var root=document.getElementById('item-10-01-06');
        root.querySelectorAll('.d10-01-06-fav').forEach(function(btn){
          btn.addEventListener('click',function(){
            btn.classList.toggle('d10-01-06-active');
            if(btn.classList.contains('d10-01-06-active')){
              for(var i=0;i<6;i++){
                var p=document.createElement('span');p.className='d10-01-06-p';
                var a=Math.PI*2*i/6;
                p.style.setProperty('--dx',Math.cos(a)*26+'px');
                p.style.setProperty('--dy',Math.sin(a)*26+'px');
                btn.appendChild(p);void p.offsetWidth;p.classList.add('d10-01-06-burst');
                setTimeout((function(el){return function(){el.remove();};})(p),620);
              }
            }
          });
        });
      })();