Liquid Fill

A gooey mass rises from the lower edge on hover, wobbles past level, and settles — the label crossfades to its inverted color as the fill passes.

#liquid #blob #hover #svg

buttons / btn-liquid

Playback

Complexity

Advanced

Interaction

Hover

Stack

SVG, CSS

Related motions

Orbital Core

Hero · SVG / Framer Motion

Concentric elliptical orbits rotate at differential speeds around a bright core. Nodes ride each ring with subtle easing so the system feels mechanical, not linear.

Magnetic Pull

Buttons · Framer Motion

The button and its label track the cursor within a capture radius on separate spring constants, so the label lags the shell and creates depth.

Circuit

Buttons · SVG / CSS

A bright segment runs the perimeter as a stroke-dash offset, leaving a short fading tail. On hover it accelerates and the fill lifts a step.