Hold to Confirm Button — Free Press and Hold JS Snippet

<div class="hc-wrap">
  <button type="button" class="hc-btn" id="hcBtn">
    <span class="hc-fill" id="hcFill"></span>
    <span class="hc-label" id="hcLabel">Hold to delete</span>
  </button>
  <p class="hc-status" id="hcStatus">Press and hold for 1.2s</p>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0f172a;color:#e2e8f0;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:24px}

.hc-wrap{text-align:center;width:100%;max-width:260px}
.hc-btn{position:relative;width:100%;border:none;border-radius:11px;background:#7f1d1d;color:#fff;font-family:inherit;font-size:14.5px;font-weight:800;padding:14px;cursor:pointer;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none;transition:transform .1s}
.hc-btn:active{transform:scale(.985)}
.hc-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:#dc2626;z-index:1}
.hc-label{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:7px}
.hc-btn.done{background:#16a34a}
.hc-btn.done .hc-fill{background:#16a34a}

.hc-status{margin-top:14px;font-size:12px;color:#94a3b8;font-weight:600;min-height:16px}

var btn = document.getElementById('hcBtn');
var fill = document.getElementById('hcFill');
var label = document.getElementById('hcLabel');
var status = document.getElementById('hcStatus');

var HOLD_MS = 1200;
var startTime = 0;
var raf = null;
var done = false;

function frame(now) {
  var elapsed = now - startTime;
  var progress = Math.min(1, elapsed / HOLD_MS);
  fill.style.width = (progress * 100) + '%';
  if (progress >= 1) { confirm(); return; }
  raf = requestAnimationFrame(frame);
}

function start() {
  if (done) reset();
  startTime = performance.now();
  status.textContent = 'Keep holding\u2026';
  raf = requestAnimationFrame(frame);
}

// Cancel if the pointer is released before the bar fills.
function cancel() {
  if (done) return;
  cancelAnimationFrame(raf);
  raf = null;
  fill.style.transition = 'width .2s';
  fill.style.width = '0%';
  status.textContent = 'Released too soon \u2014 try again';
  setTimeout(function () { fill.style.transition = ''; }, 220);
}

function confirm() {
  cancelAnimationFrame(raf);
  done = true;
  btn.classList.add('done');
  fill.style.width = '100%';
  label.textContent = 'Deleted';
  status.textContent = 'Action confirmed';
}

function reset() {
  done = false;
  btn.classList.remove('done');
  fill.style.width = '0%';
  label.textContent = 'Hold to delete';
  status.textContent = 'Press and hold for 1.2s';
}

btn.addEventListener('pointerdown', function (e) { btn.setPointerCapture(e.pointerId); start(); });
btn.addEventListener('pointerup', cancel);
btn.addEventListener('pointercancel', cancel);
btn.addEventListener('pointerleave', function () { if (raf) cancel(); });