SNSアイコン順番ポップシェアパネル

<div class="d06-14-07-wrap">
          <button class="d06-14-07-trigger" type="button">シェアする</button>
          <div class="d06-14-07-panel">
            <button class="d06-14-07-ic" type="button" style="--c:#1d9bf0" aria-label="X">X</button>
            <button class="d06-14-07-ic" type="button" style="--c:#1877f2" aria-label="Facebook">f</button>
            <button class="d06-14-07-ic" type="button" style="--c:#25d366" aria-label="LINE">L</button>
            <button class="d06-14-07-ic" type="button" style="--c:#0a66c2" aria-label="LinkedIn">in</button>
          </div>
        </div>

.d06-14-07-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; }
        .d06-14-07-trigger { border:none; border-radius:999px; background:#111827; color:#fff; padding:9px 18px; font-size:13px; font-weight:700; cursor:pointer; }
        .d06-14-07-panel { display:flex; gap:8px; }
        .d06-14-07-ic { width:32px; height:32px; border-radius:50%; border:none; background:var(--c); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transform:scale(0) translateY(8px); transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s ease; }
        .d06-14-07-panel.is-open .d06-14-07-ic { opacity:1; transform:scale(1) translateY(0); }
        .d06-14-07-panel.is-open .d06-14-07-ic:nth-child(1){ transition-delay:0s; }
        .d06-14-07-panel.is-open .d06-14-07-ic:nth-child(2){ transition-delay:.08s; }
        .d06-14-07-panel.is-open .d06-14-07-ic:nth-child(3){ transition-delay:.16s; }
        .d06-14-07-panel.is-open .d06-14-07-ic:nth-child(4){ transition-delay:.24s; }

(function(){
          var root = document.querySelector('.d06-14-07');
          var trigger = root.querySelector('.d06-14-07-trigger');
          var panel = root.querySelector('.d06-14-07-panel');
          trigger.addEventListener('click', function(){
            panel.classList.toggle('is-open');
          });
        })();