Hold to Confirm Button
For destructive actions: hold the button down and a fill sweeps across, turning the label white as it passes, then flips to a confirmed state. Let go early and it drains back. Driven by :active.
Also known as: press and hold button css, long press button animation, hold to delete button.
HTML
<button class="btn-hold-to-confirm" type="button"> <span>Hold to delete</span> <span class="btn-hold-to-confirm-fill" aria-hidden="true">Hold to delete</span> <span class="btn-hold-to-confirm-done" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Deleted</span> </button>
CSS
.btn-hold-to-confirm {
--c: var(--btn-color, #3b82f6);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: 0.75em 1.6em;
border: 0;
border-radius: 0.6em;
font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
position: relative;
overflow: hidden;
padding: 0.8em 1.7em;
background: color-mix(in srgb, var(--c) 14%, transparent);
color: var(--c);
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 35%, transparent);
transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.4, 1.5);}
.btn-hold-to-confirm-fill,
.btn-hold-to-confirm-done {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 0.4em;
background: var(--c);
color: #fff;
}
.btn-hold-to-confirm-fill {
clip-path: inset(0 100% 0 0);
transition: clip-path 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-hold-to-confirm-done {
opacity: 0;
transform: scale(1.15);
transition: opacity 0.3s ease 0.9s, transform 0.3s ease 0.9s;
}
.btn-hold-to-confirm-done svg {
width: 1.15em;
height: 1.15em;
fill: none;
stroke: currentColor;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
.btn-hold-to-confirm:active { transform: scale(0.97); }
.btn-hold-to-confirm:active .btn-hold-to-confirm-fill {
clip-path: inset(0 0 0 0);
transition: clip-path 1.4s linear;
}
.btn-hold-to-confirm:active .btn-hold-to-confirm-done {
opacity: 1;
transform: none;
transition: opacity 0.2s ease 1.4s, transform 0.35s cubic-bezier(0.3, 0.7, 0.4, 1.5) 1.4s;
}
.btn-hold-to-confirm:focus-visible {
outline: 2px solid var(--c);
outline-offset: 0.2em;
}
@media (prefers-reduced-motion: reduce) {
.btn-hold-to-confirm, .btn-hold-to-confirm *, .btn-hold-to-confirm::before, .btn-hold-to-confirm::after, .btn-hold-to-confirm *::before, .btn-hold-to-confirm *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Tailwind CSS version
The same effect using Tailwind utility classes. No custom CSS or config needed.
<button class="group relative overflow-hidden rounded-lg bg-blue-500/15 px-7 py-3 font-semibold text-blue-600 ring-2 ring-inset ring-blue-500/35 transition active:scale-[.97]"> Hold to delete <span class="absolute inset-0 grid place-items-center bg-blue-500 text-white transition-[clip-path] duration-[450ms] [clip-path:inset(0_100%_0_0)] group-active:duration-[1400ms] group-active:ease-linear group-active:[clip-path:inset(0)]" aria-hidden="true">Hold to delete</span> <span class="absolute inset-0 grid place-items-center bg-blue-500 text-white opacity-0 transition-opacity delay-[900ms] group-active:opacity-100 group-active:delay-[1400ms]" aria-hidden="true">Deleted</span> </button>
Customizing this snippet
- Color: set
--btn-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--btn-size. Every other dimension is inem, so the whole thing scales together. Currently previewing18px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.