The send button
Buttons, Transitions, SVG
NewFree
All components
The press-and-hold button
A lock that opens only if you mean it: held down, an amber colour grows in a circle from where the finger is and the lock's shackle starts to rise, and towards the end the whole button trembles. Let go too soon and the colour runs back; held to the end, the lock springs open and the button turns green. A tap closes it again.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The press-and-hold button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/host-grotesk@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the press-and-hold button: held down, a fill grows out from under the finger and the shackle of the lock starts
to rise; let go too soon and the fill runs back; held to the end, the lock springs open -->
<div class="hold" data-hold data-autoclic>
<span class="hold__ring" aria-hidden="true" data-ring></span>
<button class="hold__btn" type="button" aria-describedby="hold-hint" data-btn>
<span class="hold__face" data-face>
<span class="hold__icon">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path class="hold__shackle" d="M8 11V7.5a4 4 0 0 1 8 0V11" data-shackle/>
<rect x="5" y="11" width="14" height="10" rx="2.6"/>
<path d="M12 14.8v2.6"/>
</svg>
</span>
<span class="hold__label"><span class="hold__word" data-word>Hold to unlock</span></span>
</span>
<span class="hold__face hold__face--fill" aria-hidden="true" data-fill></span>
</button>
<p class="hold__hint" id="hold-hint"><span data-hint>Press and hold until the lock opens</span></p>
<p class="sr" aria-live="polite" data-live></p>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>Playground
Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.
14 values to change
Or ask Claude Code for it
With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:
Take “The press-and-hold button” from Animorio and fit it into my siteWhat it does
On a black background a graphite pill button with a lock in a circle and the words Hold to unlock, and below the line Press and hold until the lock opens. Pressing, the button gives a little under the finger, the words become Keep holding and an amber circle grows from the point pressed, covering the button bit by bit: where the edge of the circle passes, the words and the lock change colour halfway. Meanwhile the lock's shackle rises a little, and in the last stretch the button and the shackle tremble more and more. Let go before the end, the circle runs back to the point it came from, the button returns to its size with a bounce and the line says Too soon: hold until the lock opens; a short tap gives a little no and the line says Keep it pressed, a tap is not enough. Held to the end, the shackle lifts and swings open, the button turns green with the word Unlocked, swells with a bounce and a green ring moves away from it; the line says Tap to lock it again. A tap closes it: the shackle comes down and snaps in, and the green runs back into the lock.
How it works
Two identical faces
The button has two faces one on top of the other, with the same words and the same lock in the same places: below the graphite one, above the amber copy, which the script makes from the HTML. The copy is cut by a clip-path circle() that grows from the point pressed: where the edge passes, the words change colour halfway through a letter.
The time of the press
While the finger holds, on GSAP's ticker the pressure goes from 0 to 1 in HOLD seconds, and the circle's radius is that fraction of the distance between the point pressed and the button's farthest corner: at 1 it covers it all. The point is measured in the button's own pixels even while SQUEEZE shrinks it.
The tremble
Past 60% the button moves sideways with two quick waves added together (two sines at different frequencies) and the shackle turns round the foot of its right leg (svgOrigin 16 11), more and more until the end, when the button moves by about SHAKE pixels. Two waves instead of a random number: it shivers without jumping.
Letting go and opening
Let go early, a tween brings the pressure back to 0 with power2.in, in DRAIN seconds times how full it was, and the circle shrinks back into the point it came from; a new press starts again from there. At 1 the is-open class turns the copy green, the shackle rises and turns 28 degrees with elastic.out, the button returns to its size overshooting it, and a ring widens and fades.
Keys, touch and the preview
Space and Enter hold it like a finger (the key's repeats are ignored) and the circle grows from the lock. The button has touch-action none and no long-press menu, so the finger does not scroll the page or select. A click from a script (the library's preview) is a pretend hand: once it lets go too soon, the next time it holds to the end, and on the open lock it closes it.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
HOLD | script.js | 1.4 | The seconds to hold before the lock opens. |
DRAIN | script.js | 0.5 | The seconds the colour takes to run back from full, when you let go too soon. |
SQUEEZE | script.js | 0.96 | How small the button gets under the finger. |
SHAKE | script.js | 1.6 | How hard the button trembles just before it opens, in pixels. |
When to use it
For actions that must not happen by mistake: unlocking a door or a car from an app, confirming a payment or a transfer, deleting something important, signing, starting a recording.
On phones
The finger holds the button without scrolling the page, selecting text or opening the long-press menu (touch-action none, user-select none, -webkit-touch-callout none and contextmenu cancelled); the button is 300 pixels wide, or the screen minus 48, and the circle starts where the finger rests.
With reduced motion
The colour still grows, because it tells how long is left, but the button does not shrink, tremble or bounce; the lock is open at once without swinging, the ring does not leave, the colour runs back in an instant and the words change without rolling.
Pitfalls
- The two faces must match to the pixel: the copy is made from the HTML by the script, so a word changed in the HTML changes in both, and words that change are always written in both faces together.
- A button shrunk by scale gives shrunk sizes with getBoundingClientRect: the finger's point must be brought back to the button's own pixels (offsetWidth over the measured width), or the circle starts off target.
- With Space held, when the lock opens the key is still down: the keyup that comes after must not close it. It closes only with a key (or a finger) pressed when it was already open.
- On iPhone a long press selects text or opens the touch menu: user-select none, -webkit-touch-callout none and a cancelled contextmenu are needed.
- A tremble made with Math.random every frame makes the button jump: two sines at different frequencies give a fine but continuous shiver.
Libraries
GSAP 3.15.0, Host Grotesk (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 5.6 KB; the libraries: GSAP 28 KB.
Testing
Tested on 12 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: Done
License
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
