Interactions · Status feedback

Hover State

Also called: Hover, Hover effect, Mouseover

The style change when the mouse moves over an element, like a button getting darker or a card lifting up. It tells users they can click here.

Example

In detail

The hover state is built with CSS :hover and is the most basic interaction feedback on desktop: a button's background gets a bit darker, a link gets an underline, a card gets a shadow and moves up slightly, a table row turns light gray, and the cursor becomes a pointer hand with cursor: pointer. It answers the question in the user's head: "Can I click this?"

Keep the change subtle. A shift in color, a shadow, or a few pixels of movement is enough, and a 150–200ms transition makes it smoother. Don't change the element's size on hover, or it will push the content around it.

Phones don't have hover, so important info and actions can't only appear on hover. For example, a delete button that only shows on hover needs to be always visible on mobile, or reachable another way.

Developer infoTerm ID, DOM cues, match priority

Term ID: interaction-hover-state
DOM selectors: No DOM cues. This concept isn't detected directly on a page.
Priority: 1 · when several match at the same level, the higher priority wins
Version: v1 · updated Sep 29, 2026