CSS Micro-interactions Effects

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.

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.

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.

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.

Pin chip whose tack swings upright and turns gold when pinned, the whole chip picking up the same amber outline.

Theme toggle where the amber sun travels across the track, cools to pale grey and has a bite taken out of it by an offset disc so it lands as a crescent moon over a sky that has meanwhile filled with stars.

Bookmark flag drawn with a clip-path notch, springing up on an overshoot curve as the pill fills — one checkbox, no script.

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.

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.

Hovering the trigger pops a sky-blue tooltip with an arrow up above it using an overshooting spring easing.

Track row where the index number fades out on hover and three bouncing equaliser bars take its place.

Quantity stepper whose figure lives on a vertical strip, so pointing at plus or minus rolls the next number up into the window like an odometer wheel before you have even clicked.

Hover the row to see it swap for a dark toast offering Undo, with an amber timer bar draining beneath it.

Send button whose paper plane launches up and out of the frame when pressed, the label giving way as it goes.

Destructive button guarded by a hold: the red conic ring around the bin sweeps from empty to full over the second and a half you keep the pointer down, and drains back if you let go early.

A Medium-style clap button where the hands bounce and a lime +1 badge floats up on hover.

List row whose bin icon tips its lid open and turns red as the row is hovered, the can squashing when pressed.

Segmented range control whose blue thumb slides under whichever label you point at, previewing the choice on an overshoot curve and settling back on the checked segment when the cursor leaves.

Clicking the eye flips masked dots up out of view and rolls the plain-text password into place, no JavaScript needed.

Video card that steps through four preview frames while hovered, a thin scrub line filling along the bottom as it goes.

Menu button whose three stacked bars converge and rotate into a cross as the middle bar squeezes out of existence, the caption swapping from Menu to Close on the same beat.

Hovering the remove button on a tag chip previews the deletion by striking the label, tinting it red and shrinking the chip.

Row of grey faces that regain colour and jump forward under the cursor, the chosen one keeping a tinted disc behind it.

Table header row where pointing at a column raises a half-lit caret to show it can be sorted, the live column keeping a solid caret and a blue underline, and pressing flips the caret end over end.