シェア完了チェックマーク演出

<div class="d06-14-02-wrap">
          <button class="d06-14-02-btn" type="button">
            <span class="d06-14-02-icon">
              <svg class="d06-14-02-check" viewBox="0 0 24 24" width="16" height="16"><path d="M5 13l4 4L19 7" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
              <svg class="d06-14-02-share" viewBox="0 0 24 24" width="16" height="16"><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" fill="#fff"/></svg>
            </span>
            <span class="d06-14-02-label">シェアする</span>
          </button>
        </div>

.d06-14-02-wrap { display:flex; align-items:center; justify-content:center; }
        .d06-14-02-btn { display:flex; align-items:center; gap:8px; border:none; border-radius:999px; background:#3b82f6; color:#fff; padding:10px 20px; font-size:13px; font-weight:700; cursor:pointer; transition:background .3s ease; }
        .d06-14-02-btn.is-done { background:#22c55e; }
        .d06-14-02-icon { position:relative; width:16px; height:16px; display:inline-flex; }
        .d06-14-02-icon svg { position:absolute; inset:0; transition:transform .25s ease, opacity .25s ease; }
        .d06-14-02-check { transform:scale(0); opacity:0; }
        .d06-14-02-btn.is-done .d06-14-02-check { transform:scale(1); opacity:1; }
        .d06-14-02-btn.is-done .d06-14-02-share { transform:scale(0); opacity:0; }

(function(){
          var root = document.querySelector('.d06-14-02');
          var btn = root.querySelector('.d06-14-02-btn');
          var label = root.querySelector('.d06-14-02-label');
          var timer = null;
          btn.addEventListener('click', function(){
            btn.classList.add('is-done');
            label.textContent = 'シェアしました';
            clearTimeout(timer);
            timer = setTimeout(function(){
              btn.classList.remove('is-done');
              label.textContent = 'シェアする';
            }, 2200);
          });
        })();