Bootstrap Copy-to-Clipboard Feedback — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bscopy-card">
    <div class="card-body p-4">
      <label class="form-label small fw-semibold">API key</label>
      <div class="input-group mb-3">
        <input type="text" class="form-control" readonly value="sk_live_9f3a2c8e7b1d4f60">
        <button type="button" class="btn btn-outline-secondary bscopy-btn" data-copy="sk_live_9f3a2c8e7b1d4f60">Copy</button>
      </div>

      <label class="form-label small fw-semibold">Referral link</label>
      <div class="input-group">
        <input type="text" class="form-control" readonly value="https://app.example.com/r/priya-nair">
        <button type="button" class="btn btn-outline-secondary bscopy-btn" data-copy="https://app.example.com/r/priya-nair">Copy</button>
      </div>
    </div>
  </div>
</div>

.bscopy-card { width: 420px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bscopy-btn { min-width: 88px; transition: background .15s, color .15s, border-color .15s; }
.bscopy-btn.bscopy-copied { background: #198754; border-color: #198754; color: #fff; }

const buttons = Array.from(document.querySelectorAll('.bscopy-btn'));

function legacyCopy(text) {
  const ta = document.createElement('textarea');
  ta.value = text;
  ta.style.position = 'fixed';
  ta.style.left = '-9999px';
  document.body.appendChild(ta);
  ta.focus();
  ta.select();
  try { document.execCommand('copy'); } catch (e) { /* nothing left to fall back to */ }
  document.body.removeChild(ta);
}

function flash(btn) {
  if (btn.dataset.busy) return; // ignore rapid re-clicks mid-flash
  btn.dataset.busy = '1';
  const original = btn.textContent;
  btn.textContent = 'Copied!';
  btn.classList.add('bscopy-copied');
  setTimeout(() => {
    btn.textContent = original;
    btn.classList.remove('bscopy-copied');
    delete btn.dataset.busy;
  }, 1600);
}

buttons.forEach(btn => {
  btn.addEventListener('click', () => {
    const text = btn.dataset.copy;
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(text).then(() => flash(btn), () => { legacyCopy(text); flash(btn); });
    } else {
      legacyCopy(text);
      flash(btn);
    }
  });
});