コピー成功トースト

<button class="d08-03-10-btn" type="button">
          <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path fill="currentColor" d="M16 1H4a2 2 0 0 0-2 2v12h2V3h12zm3 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 16H8V7h11z"/></svg>
          コピー
        </button>
        <div class="d08-03-10-toast">コピーしました</div>

.d08-03-10{flex-direction:column;gap:0}
        .d08-03-10-btn{display:inline-flex;align-items:center;gap:8px;background:#2a2d3a;color:#fff;border:none;border-radius:10px;padding:12px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s,transform .1s}
        .d08-03-10-btn:hover{background:#3b3f52}
        .d08-03-10-btn:active{transform:scale(.96)}
        .d08-03-10-toast{position:absolute;bottom:34px;left:50%;transform:translate(-50%,10px);background:#22c55e;color:#fff;font-size:13px;font-weight:600;padding:8px 16px;border-radius:8px;opacity:0;pointer-events:none;box-shadow:0 6px 16px rgba(34,197,94,.35);transition:none}
        .d08-03-10-toast.is-show{animation:d08-03-10-toast 1.8s ease forwards}
        @keyframes d08-03-10-toast{0%{opacity:0;transform:translate(-50%,10px)}15%{opacity:1;transform:translate(-50%,0)}80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-8px)}}

(function(){
        var root=document.querySelector('#item-08-03-10 .d08-03-10');if(!root)return;
        var btn=root.querySelector('.d08-03-10-btn'),toast=root.querySelector('.d08-03-10-toast');
        btn.addEventListener('click',function(){
          if(navigator.clipboard){navigator.clipboard.writeText('https://example.com/').catch(function(){});}
          toast.classList.remove('is-show');void toast.offsetWidth;toast.classList.add('is-show');
        });
      })();