シェアメニュー展開ボタン

<div class="d06-14-01-wrap">
          <button class="d06-14-01-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>
          </button>
          <div class="d06-14-01-menu">
            <button class="d06-14-01-ic" type="button" style="--c:#1d9bf0" aria-label="X">
              <svg viewBox="0 0 24 24" width="16" height="16"><path d="M18.9 3H21l-6.7 7.7L22 21h-6.3l-4.9-6.4L5 21H2.9l7.1-8.2L3 3h6.4l4.4 5.9L18.9 3z"/></svg>
            </button>
            <button class="d06-14-01-ic" type="button" style="--c:#1877f2" aria-label="Facebook">
              <svg viewBox="0 0 24 24" width="16" height="16"><path d="M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.4h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0 0 22 12z"/></svg>
            </button>
            <button class="d06-14-01-ic" type="button" style="--c:#25d366" aria-label="LINE">
              <svg viewBox="0 0 24 24" width="16" height="16"><path d="M12 2C6.5 2 2 5.8 2 10.4c0 2.9 1.9 5.5 4.8 7-.2.7-.7 2.5-.8 2.9 0 0-.1.4.2.6.3.1.6 0 .6 0 .8-.1 3-2 3.5-2.4.6.1 1.2.1 1.8.1 5.5 0 10-3.8 10-8.5S17.5 2 12 2z"/></svg>
            </button>
          </div>
        </div>

.d06-14-01-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; }
        .d06-14-01-btn { display:flex; align-items:center; gap:6px; border:none; border-radius:999px; background:#3b82f6; color:#fff; padding:9px 18px; font-size:13px; font-weight:700; cursor:pointer; }
        .d06-14-01-btn svg { fill:#fff; }
        .d06-14-01-menu { display:flex; gap:8px; max-height:0; opacity:0; overflow:hidden; transition:max-height .3s ease, opacity .3s ease; }
        .d06-14-01-menu.is-open { max-height:60px; opacity:1; }
        .d06-14-01-ic { width:34px; height:34px; border-radius:50%; border:none; background:var(--c); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transform:scale(.6); opacity:0; transition:transform .25s ease, opacity .25s ease; }
        .d06-14-01-menu.is-open .d06-14-01-ic { transform:scale(1); opacity:1; }
        .d06-14-01-menu.is-open .d06-14-01-ic:nth-child(2) { transition-delay:.05s; }
        .d06-14-01-menu.is-open .d06-14-01-ic:nth-child(3) { transition-delay:.1s; }
        .d06-14-01-ic svg { fill:#fff; }

(function(){
          var root = document.querySelector('.d06-14-01');
          var btn = root.querySelector('.d06-14-01-btn');
          var menu = root.querySelector('.d06-14-01-menu');
          btn.addEventListener('click', function(){
            menu.classList.toggle('is-open');
          });
        })();