GSAP Press and Hold to Confirm Button
Overview
A press and hold button for React and Next.js, for actions that shouldn't happen on one click. Colour sweeps across as you hold and the button trembles and tightens, then it pops and sparks once it's confirmed. Let go early and it drains back.
It's useful for deleting, publishing or paying, anywhere a confirmation dialog feels heavy. The whole hold is a single GSAP timeline: holding plays it, and letting go reverses it at a faster speed from wherever it had got to. The label sits on both layers, so it changes colour exactly along the moving edge.
Details
- Category
- Buttons
- Interaction
- On Click + On Hold
- Trigger
- On Click
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 048 / CTA
GSAP Call to Action Section with Hover Colour Flood
On Hover · On Click · On Scroll
No. 028 / Gallery
GSAP Horizontal Scroll Gallery with Lenis and Fullscreen Project View
On Scroll · Mouse Move · On Hover · On Click
No. 088 / Testimonials
GSAP Testimonials Section with Auto-Advancing Quotes
On Load · On Click · On Hover · On Scroll
(02)FAQ
GSAP Press and Hold to Confirm Button — FAQ
01How do I run my action?
Pass it as onConfirm, which runs once when the hold completes. Leave out resetAfter and the button stays in its confirmed state, or set it to a number of seconds to reset.
02How long should the hold be?
Set duration in seconds. The default 1.2 is long enough to be deliberate. Longer starts to feel like waiting, unless the action really can't be undone.
03Does it work on touch screens?
Yes. It captures the pointer, so a finger drifting off the button doesn't cancel the hold, and it blocks the long-press menu.
04Can keyboard and screen-reader users use it?
Yes. Hold Space or Enter from the keyboard. A screen reader's click confirms straight away, and its aria-label explains the action.
05What happens with reduced motion?
The fill still shows your progress, because you're the one holding it. The trembling, the pop and the sparks are removed.