The slide-to-confirm button
Buttons, Physics, Transitions
NewFree
All components
The pizza button
The Book a table of a pizzeria, made of soft dough: a real soft body that leans out towards the pointer and gives under the finger. On the click the dough is slapped out, the tomato goes on in a spiral, mozzarella and basil drop from above and bounce, a brick arch builds itself round it with the fire at the back, the rim puffs and chars in spots. The oven lifts away, steam rises and the pizza bakes down into a golden pill that says Table booked.
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 pizza button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the pizza button: the Book a table of a pizzeria, a pill of soft dough on a black page. The dough is a soft
body on a canvas: it leans towards the pointer and gives under the finger. A click slaps it out wider, the
sauce goes on in a spiral, mozzarella and basil drop on it and settle, a brick oven arch builds itself
round it with the fire at the back, the crust puffs and chars, the oven lifts away and the baked pill
says Table booked -->
<div class="pizza" data-pizza>
<canvas class="pizza__art" aria-hidden="true" data-art></canvas>
<button class="pizza__btn" type="button" data-btn data-autoclic>
<span class="pizza__face" data-face="rest">
<span class="pizza__word" data-label-text>Book a table</span>
</span>
<span class="pizza__face pizza__face--done" data-face="done" aria-hidden="true">
<svg class="pizza__tick" viewBox="0 0 20 20" aria-hidden="true"><path data-tick d="M4.5 10.5l3.6 3.6 7.4-8.2"/></svg>
<span class="pizza__word" data-done-text>Table booked</span>
</span>
</button>
<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.
37 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 pizza button” from Animorio and fit it into my siteWhat it does
On a black background a pill 60 pixels tall of raw cream dough, dusted with flour, saying Book a table. Under the mouse the dough swells a touch and leans out towards the pointer, and the words widen on the typeface's width axis; a press dents the dough where the finger is and squashes it. On the click the words go and the dough is slapped out: it widens, flattens, takes an uneven hand-made outline and a raised rim, while a cloud of flour flies off its edges. The tomato spreads from the middle, leaving the spiral of the ladle; six pieces of torn mozzarella fall from above with their shadows tightening under them, bounce and squash for a moment, and three basil leaves come down swaying. Then, brick by brick, from the feet up to the keystone, an oven arch builds itself round the pizza: inside it is dark, the fire burns at the back left, its light flickers on the pizza and on the bricks. In the oven the rim puffs, turns golden and chars in clusters, like a real leopard-spotted crust, and the mozzarella melts and gets golden blisters. The arch comes apart from the keystone down and flies off, the fire dies, three threads of steam rise, and the pizza bakes down into a golden pill, the char still on its rim, that says Table booked with a tick that draws itself. A couple of seconds later a puff of flour turns it back into raw dough. With the keyboard it behaves the same.
How it works
The dough is a ring of points on springs
Seventy-two points on the pill's outline, spread at equal distances along its perimeter (two straight runs and two half circles). Each point is pulled by one spring to its place and by another to the average of its two neighbours, with damping; four small steps a frame, with the step capped at 1/30 of a second, keep it steady. The outline is drawn with quadratic curves through the midpoints, so it stays smooth.
The pointer and the slap
The pointer moves the springs' places: near it the outline leans out towards it, under a press it gives in along the normal. The slap is a kick of speed outwards to every point (harder at the round ends), while GSAP takes the places to a wider, lower shape with an uneven outline made of three sine waves: the springs do the rest, wobble included.
Rim, tomato and char
The inner edge of the rim is the ring itself, moved inwards along its normal. The tomato is that same inner outline shrunk towards the middle with a little noise, clipped inside the rim, with two thin spirals on top, dark and light, drawn as far as the ladle has got. The char spots sit in clusters along the ring and each shows up at its own point of the baking, with a soft scorch round it.
The toppings really fall
Each piece has a speed and gravity; reaching the pizza it bounces if it comes in hard enough and gets a kick on a spring that squashes and widens it for a moment. The basil leaves have air drag, so they fall slower, sway and turn. The shadow under each piece darkens as it comes nearer.
The oven
The arch is an ellipse split into bricks of equal length measured along its middle line. GSAP drops each brick into place with a bounce, from the feet up to the keystone, and on the way out throws them off in the opposite order. The fire is soft round particles added with 'lighter', clipped to the inside of the oven and drawn behind the pizza; the same light, with a flicker of three sine waves, is added on the pizza and on the bricks.
The direction and the rest
A GSAP timeline moves a few numbers (stretch, tomato, oven, fire, baking, steam) and calls the moments of the drops; the physics and the drawing run on GSAP's ticker. When springs, toppings and particles are still and the timeline is done, the canvas is no longer redrawn.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
LABEL | script.js | 'Book a table' | The words at rest. |
DONE | script.js | 'Table booked' | The words on the baked pill. |
STRETCH | script.js | 1.08 | How much wider the dough is slapped out: 1 not at all. |
MOZZARELLA | script.js | 6 | How many pieces of mozzarella fall on the pizza. |
BASIL | script.js | 3 | How many basil leaves fall on the pizza. |
GRAVITY | script.js | 2400 | How hard the toppings fall. |
BOUNCE | script.js | 0.28 | How much the toppings bounce when they land: 0 not at all. |
BAKE | script.js | 1.4 | The seconds the pizza stays in the oven. |
BRICKS | script.js | 13 | How many bricks make the oven's arch. |
HOLD | script.js | 2.6 | The seconds the baked pill stays before it turns back into dough. |
SOFT | script.js | 1 | How soft the dough is: 0.5 firm, 1.6 very wobbly. |
When to use it
For the booking of a pizzeria, a restaurant or a bakery, or the order of a home delivery: one single, important action, where a few seconds can be spent to make it memorable.
On phones
Taps work like clicks and the finger dents the dough where it touches; with a finger there is no dough leaning out towards the pointer. The oven rises about 60 pixels above the pill and sticks out some thirty pixels at the sides: at 390 pixels it fits without spilling over.
With reduced motion
No springs, no slap, no falling, no moving fire, no flour and no steam. On the click the words fade, the tomato and then the toppings appear already in place with a fade, the oven fades in and out with a still glow, the baking fades onto the pizza and the golden pill with its words arrives with a fade; then it turns back into dough the same way.
Pitfalls
- Char spots at regular distances along the rim looked like a row of dots: now they sit in clusters of one, two or three with bare stretches between, each with a soft scorch, and they show up at different points of the baking.
- Steam drawn in short pieces, each with its own opacity, looked like a dashed chain: now each thread is one line with a vertical gradient for the opacity.
- Two tweens on the same brick's opacity fought each other: each brick's entrance is a single fromTo carrying fall, turn and opacity together.
- The pill's width is measured on the words already widened by the hover (about 18 per cent more), so the words never touch the round ends.
Libraries
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 15 KB; the libraries: GSAP 28 KB.
Testing
Tested on 13 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.
