メール共有フォームのスライド展開

<div class="d06-14-10-wrap">
          <button class="d06-14-10-btn" type="button">メールでシェア</button>
          <div class="d06-14-10-form">
            <input class="d06-14-10-input" type="email" placeholder="相手のメールアドレス" />
            <button class="d06-14-10-send" type="button">送信</button>
          </div>
        </div>

.d06-14-10-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; max-width:230px; }
        .d06-14-10-btn { border:none; border-radius:999px; background:#3b82f6; color:#fff; padding:9px 16px; font-size:12.5px; font-weight:700; cursor:pointer; }
        .d06-14-10-form { display:flex; gap:6px; width:100%; max-height:0; opacity:0; overflow:hidden; transition:max-height .3s ease, opacity .3s ease; }
        .d06-14-10-form.is-open { max-height:44px; opacity:1; }
        .d06-14-10-input { flex:1; min-width:0; border:1px solid #e5e7eb; border-radius:999px; padding:7px 10px; font-size:11.5px; }
        .d06-14-10-send { border:none; background:#111827; color:#fff; border-radius:999px; padding:7px 12px; font-size:11.5px; cursor:pointer; }

(function(){
          var root = document.querySelector('.d06-14-10');
          var btn = root.querySelector('.d06-14-10-btn');
          var form = root.querySelector('.d06-14-10-form');
          var send = root.querySelector('.d06-14-10-send');
          btn.addEventListener('click', function(){
            form.classList.toggle('is-open');
          });
          send.addEventListener('click', function(){
            send.textContent = '送信済み';
            setTimeout(function(){ send.textContent = '送信'; }, 1800);
          });
        })();