Hold-to-confirm button

<button class="hold" type="button" aria-describedby="hold-help">
  <span class="hold-fill" aria-hidden="true"></span>
  <span class="hold-label">Hold to delete</span>
</button>
<p id="hold-help" class="hold-help">Press and hold (or hold Space/Enter) for one second.</p>

.hold {
  position: relative;
  overflow: hidden;
  min-width: 210px;
  border: 0;
  cursor: pointer;
  padding: 14px 26px;
  border-radius: 12px;
  font: 600 15px system-ui, sans-serif;
  color: #fff;
  background: #c93a3f;
  touch-action: none;           /* holding a finger on it shouldn't scroll or zoom */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;  /* no "copy/look up" bubble on long press (iOS) */
}
.hold:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* The fill bar grows from the left. --progress goes from 0 to 1. */
.hold-fill {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
}
.hold-label { position: relative; }   /* sits above the fill */
.hold.confirmed { background: #12a150; }
.hold-help { margin: 14px 0 0; text-align: center; font: 13px system-ui, sans-serif; color: var(--muted); }

// Hold-to-confirm: the action only runs if you keep holding for `holdDuration`.
// Releasing early cancels and the bar drains back to empty.

const holdDuration = 1000; // ms you have to hold

document.querySelectorAll('.hold').forEach((button) => {
  const label = button.querySelector('.hold-label');
  const originalLabel = label.textContent;
  let holdStartedAt = 0;
  let frame = 0;
  let isDone = false;

  function setProgress(value) {
    button.style.setProperty('--progress', value);
  }

  function tick(now) {
    const progress = Math.min((now - holdStartedAt) / holdDuration, 1);
    setProgress(progress);
    if (progress < 1) {
      frame = requestAnimationFrame(tick);
    } else {
      confirmAction();
    }
  }

  function startHold() {
    if (isDone || holdStartedAt) return;
    holdStartedAt = performance.now();
    frame = requestAnimationFrame(tick);
  }

  function cancelHold() {
    if (isDone) return;
    cancelAnimationFrame(frame);
    holdStartedAt = 0;
    setProgress(0);
  }

  function confirmAction() {
    isDone = true;
    button.classList.add('confirmed');
    label.textContent = 'Deleted ✓';
    // Put your real action here (send the request, remove the item, …).

    // Reset the demo after a moment.
    setTimeout(() => {
      isDone = false;
      holdStartedAt = 0;
      button.classList.remove('confirmed');
      label.textContent = originalLabel;
      setProgress(0);
    }, 1600);
  }

  // Mouse, pen and touch.
  button.addEventListener('pointerdown', (event) => {
    button.setPointerCapture(event.pointerId); // keep receiving events even if the finger slides
    startHold();
  });
  button.addEventListener('pointerup', cancelHold);
  button.addEventListener('pointercancel', cancelHold);
  button.addEventListener('contextmenu', (event) => event.preventDefault()); // long-press menu on Android

  // Keyboard: hold Space or Enter.
  button.addEventListener('keydown', (event) => {
    if ((event.key === ' ' || event.key === 'Enter') && !event.repeat) {
      event.preventDefault();
      startHold();
    }
  });
  button.addEventListener('keyup', (event) => {
    if (event.key === ' ' || event.key === 'Enter') cancelHold();
  });
  button.addEventListener('blur', cancelHold);
});