シェアボタン拡散演出

<div class="d06-04-02-wrap">
          <button class="d06-04-02-btn" type="button">
            <svg viewBox="0 0 24 24" width="24" height="24"><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>
          </button>
          <div class="d06-04-02-burst" aria-hidden="true">
            <span class="d06-04-02-icon" style="--d06-04-02-a:-60deg">X</span>
            <span class="d06-04-02-icon" style="--d06-04-02-a:-20deg">f</span>
            <span class="d06-04-02-icon" style="--d06-04-02-a:20deg">in</span>
            <span class="d06-04-02-icon" style="--d06-04-02-a:60deg">@</span>
          </div>
        </div>

.d06-04-02-wrap { position:relative; display:flex; align-items:center; justify-content:center; }
        .d06-04-02-btn { display:flex; align-items:center; gap:6px; padding:9px 16px; border:none; border-radius:999px; background:#3b82f6; color:#fff; font-size:13px; cursor:pointer; }
        .d06-04-02-btn svg { fill:#fff; }
        .d06-04-02-burst { position:absolute; left:50%; top:50%; width:0; height:0; }
        .d06-04-02-icon { position:absolute; left:0; top:0; width:24px; height:24px; margin:-12px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.15); font-size:10px; font-weight:700; color:#374151; opacity:0; transform:rotate(var(--d06-04-02-a)) translate(0) scale(.4); }
        .d06-04-02-burst.d06-04-02-active .d06-04-02-icon { animation:d532out .7s ease forwards; }
        @keyframes d532out {
          0% { opacity:0; transform:rotate(var(--d06-04-02-a)) translate(0) scale(.4); }
          40% { opacity:1; transform:rotate(var(--d06-04-02-a)) translate(58px) scale(1); }
          100% { opacity:0; transform:rotate(var(--d06-04-02-a)) translate(70px) scale(.6); }
        }

(function(){
          var article = document.currentScript.closest('article');
          var root = article.querySelector('.d06-04-02');
          var btn = root.querySelector('.d06-04-02-btn');
          var burst = root.querySelector('.d06-04-02-burst');
          btn.addEventListener('click', function(){
            burst.classList.remove('d06-04-02-active');
            void burst.offsetWidth;
            burst.classList.add('d06-04-02-active');
            setTimeout(function(){ burst.classList.remove('d06-04-02-active'); }, 750);
          });
        })();