シェア数カウントアップボタン

<div class="d06-14-05-wrap">
          <button class="d06-14-05-btn" type="button">
            <svg viewBox="0 0 24 24" width="18" height="18"><path d="M18 8a3 3 0 1 0-2.83-4H15a3 3 0 0 0 .05 3.88L8.9 11.1a3 3 0 1 0 0 1.8l6.15 3.22A3 3 0 1 0 18 8zM6 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg>
            <span>シェア</span>
            <span class="d06-14-05-count">128</span>
          </button>
        </div>

.d06-14-05-wrap { display:flex; align-items:center; justify-content:center; }
        .d06-14-05-btn { display:flex; align-items:center; gap:8px; border:none; border-radius:999px; background:#3b82f6; color:#fff; padding:9px 18px; font-size:13px; font-weight:700; cursor:pointer; }
        .d06-14-05-btn svg { fill:#fff; }
        .d06-14-05-count { background:rgba(255,255,255,.25); border-radius:999px; padding:2px 9px; font-size:12px; }
        .d06-14-05-count.is-bump { animation:d1865bump .35s ease; }
        @keyframes d1865bump { 0%{ transform:scale(1); } 45%{ transform:scale(1.35); } 100%{ transform:scale(1); } }

(function(){
          var root = document.querySelector('.d06-14-05');
          var btn = root.querySelector('.d06-14-05-btn');
          var countEl = root.querySelector('.d06-14-05-count');
          var count = 128;
          btn.addEventListener('click', function(){
            count++;
            countEl.textContent = count;
            countEl.classList.remove('is-bump');
            void countEl.offsetWidth;
            countEl.classList.add('is-bump');
          });
        })();