← All elements
<button class="ph"><span>Hold to delete</span></button>About this button
A destructive action that only fires if you keep pressing: a red fill grows while held and snaps back if released early.
How it works
A pseudo-element fill is scaled to zero from the left. While the button is :active the transition switches to a 1.4 second linear one, so holding fills the button slowly, and releasing returns to the quick default transition, which snaps it back.
Ways to customise it
- Change 1.4s to require a longer hold.
- Recolour the fill and border from #ef4444.
- Use it for any confirm action.
Good to know
CSS alone cannot run the action after the hold completes, so pair it with a small script or a form in a real app. The visual gives a clear hint and still works with touch.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.