Hold-to-confirm fill

Hold-to-confirm fill: a CSS button. Copy the rules, or the prompt that rebuilds it.

progressholdrectanglefillactive-driven

CSS

.btn-181 {
  position: relative;
  font: 600 14px/1 system-ui,sans-serif;
  color: #991b1b;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 13px 24px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color .2s
}
.btn-181::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  background: #dc2626;
  z-index: -1;
  transition: width .2s ease-out
}
.btn-181:hover {
  border-color: #ef4444
}
.btn-181:focus-visible {
  outline: 2px solid #dc2626;
  outline-offset: 3px
}
.btn-181:active {
  color: #fff
}
.btn-181:active::before {
  width: 100%;
  transition: width 1.5s linear
}

HTML

<button class="btn-181">Hold to delete</button>

Prompt

A hold-to-confirm button: pale red #fee2e2 with 1px #fca5a5 border, 8px radius, dark red #991b1b 14px semibold text, 13px by 24px padding. While the mouse is held down (:active) a solid #dc2626 fill grows from the left edge across the button over 1.5 seconds linearly and the text turns white; releasing snaps it back in 200ms. Hover reddens the border. Focus 2px red outline.

Hold-to-confirm fill

Same shelf