Segurar para confirmar

Segurar para confirmar: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Um botão de segurar para confirmar: vermelho pálido #fee2e2 com borda de 1px #fca5a5, raio de 8px, texto vermelho escuro #991b1b 14px semibold, padding 13px por 24px. Enquanto o mouse é mantido pressionado (:active) um preenchimento sólido #dc2626 cresce da borda esquerda por todo o botão em 1.5 segundos de forma linear e o texto fica branco; ao soltar ele volta em 200ms. No hover a borda fica mais vermelha. Focus com outline vermelho de 2px.

Segurar para confirmar

Mesma prateleira