Halten zum Bestätigen

Halten zum Bestätigen: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

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

Ein Halten-zum-Bestätigen-Button: blassrot #fee2e2 mit 1px #fca5a5 Rahmen, 8px Radius, dunkelroter #991b1b 14px semibold Text, 13px mal 24px Padding. Solange die Maus gedrückt bleibt (:active) wächst eine gefüllte #dc2626 Fläche von der linken Kante über 1.5 Sekunden linear über den Button und der Text wird weiß; Loslassen schnappt in 200ms zurück. Hover rötet den Rahmen. Focus: 2px rote Outline.

Halten zum Bestätigen

Gleiches Regal