Liquid Button

Create a liquid fill button. A pill button with a 1.5px ink border and transparent background. On hover (or keyboard focus), liquid pours in from the bottom: an accent-colored fill rises from below the button to fully cover it in 0.6s with cubic-bezier(.22,1,.36,1), while the label crossfades from ink to paper-white (0.35s). The liquid's surface must not be flat. Build the wave with the rotating-rounded-square trick: the fill layer carries two oversized square children (width ~150% of the button, aspect ratio 1), each with border-radius around 42-46%, centered on the water line and rotating continuously (linear; one at ~6s, one at ~9s, the slower one at 60% opacity). Their rounded corners sweeping past the surface read as a rolling liquid crest. Clip everything with overflow: hidden on the button. On mouse leave the liquid drains back down with the same easing. Pressing squashes the button to 96%. Accessibility: the effect is pure decoration (aria-hidden on the fill layer). Keep a real button element with a real label. If prefers-reduced-motion is set, replace the rise and waves with a simple background-color fade. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.