Hold Progress Button

<button class="hpb-btn" id="hpb-btn">
  <span class="hpb-progress" id="hpb-progress"></span>
  <span class="hpb-text" id="hpb-text">Hold to confirm</span>
</button>

.hpb-btn {
  position: relative;
  padding: 14px 36px;
  background: #1e293b;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  overflow: hidden;
}
.hpb-progress {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0;
  background: rgba(99,102,241,0.3);
  transition: width 0.05s linear;
}
.hpb-text {
  position: relative;
  z-index: 1;
}

const btn = document.getElementById('hpb-btn');
const progress = document.getElementById('hpb-progress');
const text = document.getElementById('hpb-text');
let holdTimer = null;
let pct = 0;
btn.addEventListener('mousedown', function() {
  pct = 0;
  holdTimer = setInterval(function() {
    pct += 2;
    progress.style.width = pct + '%';
    if (pct >= 100) {
      clearInterval(holdTimer);
      text.textContent = 'Confirmed!';
      btn.style.borderColor = '#22c55e';
    }
  }, 30);
});
btn.addEventListener('mouseup', function() {
  if (pct < 100) {
    clearInterval(holdTimer);
    pct = 0;
    progress.style.width = '0';
  }
});
btn.addEventListener('mouseleave', function() {
  if (pct < 100) {
    clearInterval(holdTimer);
    pct = 0;
    progress.style.width = '0';
  }
});