Pure CSS
36 effects. The response is the same wherever the pointer enters or how fast it moves.
Fill snaps to blackhover
Fill pulls in from the rulepress
02Lines retractarticle 4a
Lines retract, then fillhover
Fill clears, sides staypress
Outer frame closes inhover
Halo closes to a double rulepress
04Border revolvearticle 3
Border orbits as a dashhover
Dash grows back to full rulepress
A dot grows into a pill fillhover
Pill shrinks back to the dotpress
06Curtain droparticle 7, 23
Fill drops in from the tophover
Curtain lifts halfwaypress
Grows ten percent in placehover
Shrinks below its rest sizepress
Bounces into a slight tilthover
Tilts back the other waypress
Rises eight pixelshover
Lands back flatpress
10Crossed framesarticle 12
Frames extend past the edgeshover
Frames reach further outpress
Border splits, halves sweephover
Halves rejoin into the rulepress
Sinks with an inner shadowhover
Sinks deeper stillpress
Sides shrink, ends widenhover
Bars push further outpress
Sides slide in to the middlehover
Sides part around the labelpress
15Lift with shadowarticle 27b
Rises over a soft shadowhover
Lands on its own shadowpress
All edges close in to fillhover
Fill thins to an inner bandpress
A solid slab appears behindhover
Button jumps onto its slabpress
Two half bars cross to fillhover
Halves pull back to quarterspress
A disc grows from the cornerhover
Blob retreats to its cornerpress
Border redraws clockwisehover
Rule undraws itselfpress
Flips to an inverted backhover
Flips on round to the frontpress
Three waves rise and fillhover
Level drops to halfwaypress
Gooey blobs bulge outwardhover
Blobs pull back into the boxpress
24Fill sidewaysarticle 35, 36a
Fill spreads out sidewayshover
Fill narrows to a centre barpress
25Fill verticalarticle 36b
Fill spreads up and downhover
Fill narrows to a mid bandpress
26Diagonal sweeparticle 36c
Diagonal bar widens to fillhover
Narrows to a diagonal bandpress
A skewed bar wipes inhover
Pulls back to a slanted halfpress
Fills, frame expands outwardhover
Frame closes back on the boxpress
29Radius morpharticle 38c
Corners round into a pillhover
Rounds two opposite cornerspress
A soft glow spreads aroundhover
Glow flares widerpress
Label slides out and back inhover
Slides back the other waypress
Fill wipes left to righthover
Fill rebounds to halfwaypress
33Perspective tiltmenuhover 9
Tilts back in perspectivehover
Tilts further backpress
34Corner marksmenuhover 14
Marks appear at the cornershover
Marks tighten on the cornerspress
Letters space outhover
Letters close up tightpress
36Stepped fillmenuhover 18
Fill grows in eight stepshover
Fill steps back to a halfpress
Pointer-reactive
36 effects. The response depends on pointer position, speed or entry edge, so it needs JavaScript. Hover all does not apply.
Drifts toward the pointerhover
Snaps the rest of the waypress
38Label magnetprior art gsap
Label drifts, frame stayshover
Carries past the pointerpress
39Ink bleedprior art gsap
Fill grows from entry pointhover
Drains back to the entrypress
40Follow discnew
A disc follows the pointerhover
Pins where you pressedpress
Fill enters from that edgehover
Backs out the way it camepress
Fill leaves by the exit edgehover
Starts leaving earlypress
43Pointer tiltnew
Tilts to track the pointerhover
Leans near twice as farpress
44Wobble tiltnew
Tilt overshoots and settleshover
Rocking is caught levelpress
45Squashnew
Stretches along the travelhover
Squashes the other waypress
46Label lagnew
Label trails the pointerhover
Catches up all the waypress
47Edge bulgenew
Nearest edge bows outwardhover
Bows deeper and widerpress
48Elastic framenew
All four edges lean to ithover
Every edge gathers inpress
49Speed trackingnew
Tracking opens with speedhover
Packs the letters tightpress
50Press ripplenew
Ring from the press pointpress
51Proximity wakenew
Rule thickens as you nearhover
52Cast shadownew
Shadow falls away from ithover
Shadow swings to your sidepress
53Label repelnew
Label shies away from ithover
Shies to the far edgepress
54Leannew
Skews toward the pointerhover
Leans back the other waypress
55Swaynew
Leans against the travelhover
Holds the lean at fullpress
56Slinkynew
Letters trail one by onehover
Holds the stretch openpress
57Dimplenew
Shrinks toward the pointerhover
Collapses onto the presspress
58Fill to pointernew
Fill reaches the pointerhover
Fill runs on to the endpress
59Angle wipenew
Wipes along the entry anglehover
Wipes on out the far sidepress
60Momentumnew
Fills as fast as you enterhover
Leaves as fast as it camepress
61Pinholenew
Black, with a hole at ithover
Hole shuts to a pinprickpress
62Reticlenew
A ring circles the pointerhover
Ring fills in solidpress
63Crosshairnew
Lines cross at the pointerhover
Arms run back to a tickpress
64Scanner barnew
A bar tracks the pointer xhover
Bar covers what it scannedpress
65Cometnew
Disc trails a tail behindhover
Tail laid out and heldpress
66Dwell bloomnew
Grows the longer you resthover
Bloom collapses to a discpress
67Corner pullnew
Nearest corner reaches ithover
All four corners reach itpress
68Push innew
Edge dents as you approachhover
Dent returns, deeperpress
69Gap followsnew
Border gap faces the pointerhover
Gap opens to two arcspress
70Beadnew
Bead slides toward ithover
Bead swells to a studpress
71Swellnew
Grows as you approachhover
Swell runs the other waypress
72Rise to meetnew
Lifts to meet you, landshover
Sinks below the planepress
Variable font
14 effects. Inter loaded as a variable font: weight 100 to 900 and optical size 14 to 32 are written per frame, some per letter, all pointer-driven.
73Boldennew
Weight rises as you nearhover
Runs on to the thin endpress
74Tracking by xnew
Spacing opens left to righthover
Tracks wider than the edgepress
75Weight by xnew
Thin at left, bold at righthover
Commits to the nearer endpress
76Weight keysnew
Letter under it goes boldhover
Key under it goes thinpress
77Docknew
Letter under it growshover
Narrows onto one letterpress
78Keys pressnew
Letter under it sinkshover
The key bottoms outpress
79Weight ripplenew
Bold travels through wordhover
A thin wave runs backpress
80Optical sizenew
Optical size by distancehover
Optical size falls backpress
81Face the pointernew
Letters turn to face ithover
Letters turn away from itpress
82Partnew
Letters part around ithover
Opens into two blockspress
83Weight by speednew
Bolder the faster you movehover
Goes bold with no motionpress
84Weight by dwellnew
Bolder the longer you resthover
Weight flips about basepress
85Grassnew
Letters lean away from ithover
The whole word goes overpress
86Weight holds widthnew
Bolder, width held fixedhover
Lets the bold word widenpress
Hatching and halftone
4 effects. Darkness as line or dot density, so the fill is still only black on white. The pointer sets density, angle and origin.
87Hatch fillnew
Lines close up as you nearhover
Breaks back into open linespress
88Halftone bloomnew
Dots swell under the pointerhover
Tightens on the press pointpress
89Stipple bleednew
Dots soak in from the entryhover
Soak runs back to the presspress
90Dither wipenew
Ordered dither from the edgehover
Lifts back to half ditherpress
Intent and prediction
4 effects. The button responds to where the pointer is going, not where it is: velocity, dwell and heading decide the fill.
91Anticipationnew
Fill starts before arrivalhover
Shrinks onto the guesspress
92Hover intentnew
Fills only after 80ms insidehover
Retracts to the gate framepress
93Exit gracenew
Fill holds 200ms after exithover
Fill parts around the labelpress
94Approach anglenew
Fill sweeps along headinghover
Backs off to show the anglepress
Press, hold and release
5 effects. The response runs from pointerdown: how long it was held, how hard, where it let go. Hover alone shows nothing.
95Hold to confirmnew
Fill grows while you holdpress
96Press depth by pressurenew
Sinks deeper with pressurepress
97Drag-off cancelnew
Fill drains by the exit edgepress
98Release bouncenew
Bounces more the longer heldpress
99Thrownew
Drag, release, springs backpress
Keyboard and focus
3 effects. Nothing happens on hover. Tab direction, Space or Enter, and how long focus rests drive the value. Tab into a card to see it.
100Direction-aware focusnew
Fill follows Tab directionfocus
101Key pressnew
Space or Enter presses it inkey
102Focus dwellnew
Bolder while focus restsfocus
Shape morph
5 effects. The outline itself changes shape. The rule is an SVG path redrawn per frame, so a tail, bite, cut or shear keeps its 2px stroke.
103Speech tailnew
A point grows to face youhover
Reaches out to a spikepress
104Notchnew
A bite opens where you touchhover
Bite turns out to a bulgepress
105Chamfernew
Nearest corner cuts at 45hover
All four corners cutpress
106Nearest corner roundsnew
Only the near corner roundshover
Rounds the whole corner offpress
107Parallelogramnew
Sides shear by pointer xhover
Shears back the other waypress
Physics beyond springs
4 effects. Bodies with mass: a soft outline, a hanging plate, an elastic label, a dropped weight. Each settles under a second.
108Jellynew
Outline dents where you pokehover
Pulls in instead of outpress
109Pendulumnew
Hangs, swings when pushedhover
Caught and held overpress
110Rubber bandnew
Label stretches, snaps backhover
Recoils past restpress
111Weight dropnew
Label lands, bounces oncehover
Drops the same fall againpress
Cursor
3 effects. The pointer itself is the effect. The system cursor is hidden over the stage and a drawn cursor, a child of the button, replaces it.
112Cursor becomes buttonprior art codrops
Dot grows to fill the buttonhover
Plate falls back to the dotpress
Dot lags, snaps to centrehover
Lets go onto the press pointpress
114Inverting cursorprior art codrops
Disc flips at the borderhover
Disc empties to a ringpress
New CSS, no JavaScript
6 effects. Features the pure CSS section predates: linear() springs, @property, :has(), @starting-style, anchor positioning, quadrant hit areas.
115Spring easingnew
Scale springs, three bounceshover
Springs down below restpress
116Conic sweepnew
Typed angle sweeps the fillhover
Sweeps back to six o'clockpress
117Sibling reactsnew
Prior sibling grows behindhover
Plate spreads further behindpress
118Display transitionnew
Appears out of display:nonehover
Plate grows out to the rulepress
119Anchored underlinenew
Sibling anchored to the boxhover
Underline runs past the endspress
120Quadrant directionnew
Fill enters from that edgehover
Leaves by the quadrant heldpress
SVG filters
3 effects. Filter primitives defined inline in the button and written per frame; the filter is removed at rest so the rest render is untouched.
121Displacement by speednew
Warps the faster you movehover
Warp holds past top speedpress
122Dilate weightnew
Strokes dilate as you nearhover
Stems take the next steppress
123Threshold shadownew
Blurred shadow snapped hardhover
Cut drops, shadow surfacespress
After the press
4 effects. States that begin on a completed click, not on hover: each runs by itself and is back at rest within four seconds.
124Pending fillnew
Fill creeps to full, clearsclick
125Success checknew
Check draws from the borderclick
126Error settlenew
One shake, then stillclick
127Undo countdownnew
Bar drains, click to cancelclick
Label content
4 effects. The word changes, not the box: letters scramble and settle, retype from the entry side, swap language by direction, or change case.
128Scramble settlenew
Letters cycle then settlehover
Scrambles again and holdspress
129Typewriter revealnew
Retypes from the entry sidehover
Caret grows to a blockpress
130Word swap by directionnew
BOUTON from the right halfhover
Swaps to the other wordpress
131Case morphnew
Lowercase spreads from ithover
Caps return up to the presspress