Mantener para confirmar

Mantener para confirmar: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Un botón de mantener para confirmar: rojo pálido #fee2e2 con borde 1px #fca5a5, radio 8px, texto rojo oscuro #991b1b 14px semibold, padding 13px por 24px. Mientras el ratón se mantiene pulsado (:active) un relleno sólido #dc2626 crece desde el borde izquierdo a lo largo del botón durante 1.5 segundos de forma lineal y el texto pasa a blanco; al soltar vuelve en 200ms. En hover el borde enrojece. Focus con outline rojo de 2px.

Mantener para confirmar

Misma estantería