What happens under the cursor, across inputs, links and tiles.
Hover states are the cheapest affordance in interface design: they tell you a thing is interactive before you commit to clicking it. The ones collected here are deliberately small — a lift, a tint, an underline that draws itself — because a hover effect that redraws half the screen is an animation with a pointer trigger, not feedback.
A label that starts centered and gracefully floats up to the corner when the field is focused or filled.
Minimalist input whose bottom border grows in from the left on focus for an elegant material reveal.
A framed visual that smoothly zooms in on hover while the overlay text stays sharp — common in image galleries.
A link whose underline wipes in from left to right on hover and wipes out the same way on leave.
A pill chip whose arrow shoots up and to the right on hover, while the surface fills with color.
A pure-CSS iOS-style toggle with a hidden checkbox, smooth slide, and accessible focus ring.
A native checkbox restyled with appearance:none — fills with indigo and draws an animated checkmark when checked.
A dark chip that reveals a small floating tooltip with an arrow above it on hover, using only pseudo-elements.
Four overlapping circular avatars that fan out horizontally on hover, with each one rising to the top in turn.
Blue input whose label floats above on focus or when filled.
Minimal input whose ocean underline grows from left on focus.
Slate framed tile whose ocean content zooms in on hover.
Text field with a 3px blue focus ring and a label that lights via :focus-within. Keeps a visible focus state instead of removing it.
Search input with a CSS-drawn magnifier and a ⌘K keycap hint, lighting ocean on focus.
Dashed blue dropzone that tints and lifts on hover, with a CSS-drawn upload arrow.
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.
Icon-only field that widens into a full ocean search box on hover or focus.
Six single-character boxes that mark themselves filled with `:not(:placeholder-shown)`, so state comes from the value rather than a class.
Showing 24 of 74. Search the rest →
Solid, outline, ghost, gradient and glow — every state included.
Lifts, tilts, spotlights and border reveals on a card surface.
Small confirmations: checks, likes, copies, ripples and nudges.
Floating labels, filled and outlined fields, focus rings.
Two faces, one element, rotated on hover or focus.
Perspective, tilt and depth from transforms alone.