Small confirmations: checks, likes, copies, ripples and nudges.
A micro-interaction is the sub-second reply an interface gives when you do something — the tick after a copy, the heart that fills, the shake on a wrong password. They matter out of proportion to their size because they are the only proof the click registered. Keep them under 300ms, and make sure the state they announce is real rather than optimistic.
Material-style ripple that blooms from the center of a blue button on :active.
Two rounded rectangles make the heart; checking it pops the shape and tints it ocean.
Ocean confirmation ring that scales in, then snaps a border-drawn tick into place.
Button whose label slides away to reveal an ocean "Copied" state underneath.
Field that shakes once on rejection, then focuses back to a calm ocean ring.
Pill link that lifts toward the cursor while its ocean arrow stretches forward.
Bell that swings on hover while its ocean count badge pops in over the corner.
Bookmark flag drawn with a clip-path notch, springing up on an overshoot curve as the pill fills — one checkbox, no script.
Row reversed in flex so a plain sibling combinator lights every star to the left of the pointer — the trick that makes hover ratings work in pure CSS.
Up and down controls sharing one arrow drawn from a block and a triangle, the down variant just the same shape rotated.
Count chips that lift on hover with the one you have picked tinted and outlined, plus an add control drawn as two crossed bars.
Sortable row whose dotted grip lights on hover and tilts fractionally while held, the cursor switching from grab to grabbing to confirm the state.
List row sliding aside to expose the actions parked behind it, the destructive option furthest out so it takes the longest travel to reach.
Ghost of the item arcing from the button to the basket and shrinking as it goes, the count bumping only once the flight lands so cause and effect stay in order.
Checkbox and label treated as one gesture — the tick springs in, the rule draws left to right, and the text dims last so the sequence reads as completion rather than deletion.
Row lifting off the stack with a slight tilt while a dashed gap opens where it will land, so the drop target is shown rather than guessed at.
Six scraps thrown on individually authored arcs with mismatched durations and spins, because a burst where every piece shares a curve reads as a fan.
A Follow pill that fills in, grows a checkmark and relabels itself Following when clicked, using a hidden checkbox.
Hovering the trigger pops a sky-blue tooltip with an arrow up above it using an overshooting spring easing.
Hover the row to see it swap for a dark toast offering Undo, with an amber timer bar draining beneath it.
A Medium-style clap button where the hands bounce and a lime +1 badge floats up on hover.
Clicking the eye flips masked dots up out of view and rolls the plain-text password into place, no JavaScript needed.
Hovering the remove button on a tag chip previews the deletion by striking the label, tinting it red and shrinking the chip.
Send button whose paper plane launches up and out of the frame when pressed, the label giving way as it goes.
Showing 24 of 35. Search the rest →
Solid, outline, ghost, gradient and glow — every state included.
Alerts, banners and stacked toasts with timed dismissal.
What happens under the cursor, across inputs, links and tiles.
Determinate bars, rings, meters and step indicators.
Checkbox-backed switches, segmented toggles and theme flips.
Hover and focus tips with arrows, no positioning library.