リツイート・拡散アニメーション

<div class="d06-04-08-wrap">
          <button class="d06-04-08-btn" type="button" aria-label="リツイート">
            <svg viewBox="0 0 24 24" width="28" height="28"><path d="M7 7h8V4l5 4-5 4V9H7a2 2 0 0 0-2 2v3H3v-3a4 4 0 0 1 4-4zm10 10H9v3l-5-4 5-4v3h8a2 2 0 0 0 2-2v-3h2v3a4 4 0 0 1-4 4z"/></svg>
          </button>
          <span class="d06-04-08-count">54</span>
        </div>

.d06-04-08-wrap { display:flex; align-items:center; gap:8px; }
        .d06-04-08-btn { border:none; background:#f1f5f9; color:#6b7280; border-radius:50%; width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
        .d06-04-08-btn svg { fill:currentColor; }
        .d06-04-08-btn.d06-04-08-active { color:#22c55e; }
        .d06-04-08-btn.d06-04-08-spin svg { animation:d538spin .5s ease; }
        @keyframes d538spin { from{ transform:rotate(0);} to{ transform:rotate(360deg);} }
        .d06-04-08-count { font-size:16px; font-weight:700; color:#1f2937; }

(function(){
          var article = document.currentScript.closest('article');
          var root = article.querySelector('.d06-04-08');
          var btn = root.querySelector('.d06-04-08-btn');
          var countEl = root.querySelector('.d06-04-08-count');
          var count = 54;
          var active = false;
          btn.addEventListener('click', function(){
            active = !active;
            count += active ? 1 : -1;
            countEl.textContent = count;
            btn.classList.toggle('d06-04-08-active', active);
            btn.classList.remove('d06-04-08-spin');
            void btn.offsetWidth;
            btn.classList.add('d06-04-08-spin');
          });
        })();