#state CSS effects

5 free, pure-CSS effects match the "state" tag. Each is copy-ready and needs no library or build step.

The status label cross fades from a saving state into a saved state and back.

A drawn microphone badge carries a slash that retracts on hover as the state flips to live.

An enabled rail above a locked twin that drains its colour and dims its own label.

A checkbox mute key greys the whole rail out and swaps the readout for a muted badge.

Past entries sit dimmed above a glowing now divider while what is next stays lit.

Popular tags