The elastic button
Buttons, Hover, Text
NewFree
All components
The blind pressed button
In the minimal style, on white: the Join the list of a letterpress studio, a pill made only of words and a one pixel line. Pressed, the paper sinks into the pill like a blind deboss, starting from the exact point you touch: a slightly darker sheet with the soft shadows of a press opens as a circle, a thin ring of pressure runs ahead, and On the list stays pressed into the paper, a dark edge above and a light edge below each letter. Pressed again, the paper rises back on a spring and a pixel too far.
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 blind pressed button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the blind pressed button: a hairline pill on white paper, made only of words and a line. Pressed, the paper
sinks into it like a blind deboss, starting from the point you press and spreading out; the new words are
pressed into the paper. Pressed again, the paper rises back with a spring -->
<div class="press" data-press>
<p class="press__brand">Mardale Press</p>
<button class="press__btn" type="button" data-btn data-autoclic aria-pressed="false">
<span class="press__face" data-face>
<span class="press__word" data-rest>Join the list</span>
</span>
<span class="press__sunk" data-sunk aria-hidden="true">
<span class="press__word press__word--sunk" data-done>On the list</span>
</span>
</button>
<p class="press__note" data-note>Letterpress cards, one issue a season</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.
20 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 blind pressed button” from Animorio and fit it into my siteWhat it does
On a white background the small name Mardale Press, below it a pill about 300 pixels wide made of a one pixel light grey outline and the words Join the list in Archivo, and below that the line Letterpress cards, one issue a season. Under the pointer the outline turns black and the words widen along the width axis on a spring. Pressed, the pill goes down two pixels and slowly comes back; from the exact point of the click a circle of slightly darker paper opens, with the inner shadows of a press (dark above, light below) and a fine grain, and ahead of the edge of the circle runs a thin ring that fades as it reaches the corners. Inside the pressed paper is On the list, debossed: the letters are the colour of the paper, with a dark edge above and a light one below. The small line turns vermilion and says The winter issue ships in December. Pressed again, the paper closes back towards the new point, the pill rises a pixel past flat and settles.
How it works
Two layers and a circle
The button has two layers on top of each other: the face, with the outline and Join the list, and the pressed paper, with the inner shadows, the grain and On the list. The pressed paper is cut by a clip-path circle that starts at the click point with a radius of zero; GSAP takes one number from 0 to 1 and the radius grows to the far corner of the pill, so the circle always covers it all.
The pressed in letters
The pressed words are nearly the colour of the paper and have two shadows: a dark one pixel one above and a light one pixel one below. It is the trick of engraved letters: the light comes from above, the upper edge stays in shade and the lower edge catches the light.
The ring of pressure
A circle with a one pixel border follows the edge of the cut: same size, same centre. Its opacity is the sine of the progress, so it appears, shows halfway and fades as it reaches the corners.
Down and up
Pressing, the pill goes down SINK pixels in 0.11 seconds and comes back with elastic.out while staying a little low, like pressed paper. Releasing, the circle closes back towards the new point, then the pill rises OVERSHOOT pixels above flat and settles on a spring.
Accessible
It is a real button with aria-pressed; an aria-live line announces On the list; from the keyboard the circle starts from the centre. While the paper moves clicks are ignored. With reduced motion the pressed paper fades in and out, with no circle and no springs.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
LABEL | script.js | Join the list | The words at rest. |
DONE | script.js | On the list | The words pressed into the paper. |
NOTE | script.js | Letterpress cards, one issue a season | The small line under the pill. |
NOTE_DONE | script.js | The winter issue ships in December | The small line once pressed. |
SPREAD | script.js | 0.9 | The seconds the deboss takes to spread from the point you press. |
SINK | script.js | 2 | How far the pill goes down as you press it, in pixels. |
OVERSHOOT | script.js | 1 | How far the paper rises past flat as it springs back, in pixels. |
WIDEN | script.js | 112 | How wide the words get under the pointer (Archivo width axis). |
When to use it
For a sign up or confirm button that should feel made of paper: the newsletter of a print studio or a stationer, a magazine subscription, accepting a wedding invitation, booking a workshop.
On phones
The pill narrows to 64% of the width and gets shorter with the window height; a tap starts the circle from the point touched, like a click. The widening of the words happens only with a mouse.
With reduced motion
The pressed paper fades in and out, with no circle, no ring and no springs; the small line changes with a fade.
Pitfalls
- The circle's radius has to reach the corner farthest from the click point, not the centre: pressing near an edge, a radius of half the width left the opposite side uncovered.
- The pressed letters should be nearly the colour of the pressed paper: too light and they cannot be read, too dark and they look printed in ink and the blind effect is lost.
- The pill changes size with the window: a ResizeObserver moves the click point in proportion and redraws the circle, otherwise after rotating the phone the cut stayed off.
- A keyboard click has zero coordinates (detail 0): the circle must start from the centre, not from the top left corner.
Libraries
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 4.8 KB; the libraries: GSAP 28 KB.
Testing
Tested on 24 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: To do
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.
