Hover effects for websites: feedback that means something
A hover effect should answer one question: will this respond if I click it? Change something that's easy to see, such as colour, underline, border or a small movement of an arrow, keep it under about 200ms, give keyboard focus the same cue, and never let hover be the only sign that something is interactive, because phones don't hover.
What hover is for
With a mouse or trackpad, hover is a preview. Before committing to a click, a visitor points, and the interface confirms that the thing under the pointer is live. Done well, it removes doubt. Done badly, it adds noise: everything on the page twitching as the pointer crosses it, or effects so faint they could be rendering glitches.
That gives two rules for hover effects for websites of any style. Only things that respond to a click should react to hover. And the reaction should be distinct enough to notice without looking for it.
Effects that work
- Colour or fill change
- A button darkens or lightens a step; a text link changes colour. Simple and clear, provided both states have enough contrast.
- Underline
- Adding, thickening or offsetting an underline on links. Underlines are the most widely understood link cue there is.
- Border or outline
- A card's hairline border darkens to the text colour. Quiet, and works well for clickable cards in calm styles.
- A directional nudge
- An arrow next to a link moves a few pixels in the direction of travel. Small, specific and meaningful: it says "this goes somewhere".
- Image movement inside its frame
- A product photo scales up a few per cent while its frame stays still. Suggests depth without moving the layout.
- Cursor
- The pointer cursor on links and buttons. Browsers do this for links automatically; add it for custom controls.
Two effects to avoid
Fading the opacity
Dropping an element to 70 or 80 per cent opacity on hover is the most common effect in templates and generated sites, and the weakest. It reduces contrast at exactly the moment someone is trying to read the label. It also borrows the visual language of disabled controls, which are conventionally shown faded, so the button looks less available, not more. Change the colour instead.
Every card lifting
Cards that rise a few pixels with a growing shadow can work for a single clickable card. When every card in every section does it, including cards that aren't links, the movement stops meaning anything. The page feels restless, and visitors can no longer tell clickable cards from static ones. Reserve movement for things that respond, and keep it small.
Touch screens and keyboards
On phones and tablets there's no hover. A tap may trigger the hover style briefly, and on some browsers it sticks until the visitor taps elsewhere, leaving a button looking pressed. Wrap hover styles in @media (hover: hover) and (pointer: fine) so they apply only on devices with a real pointer.
More importantly, anything that only reveals itself on hover is invisible on touch. Hidden "view details" buttons that appear over a card, menus that open only on hover, and tooltips with essential information all fail. The interactive cue has to be visible at rest: a button that looks like a button, a link that's underlined or coloured, a card with a visible arrow or label.
Keyboard users don't hover either. Pair every hover style with the same change under :focus-visible, plus a clear focus outline, so tabbing through the page shows the same feedback. The focus state design guide covers that outline.
Timing
- Colour changes: 100 to 150ms, or instant. Hover feedback that lags feels broken.
- Small movements: 150 to 200ms with a strong ease-out, so most of the change happens straight away.
- Image scale inside a frame: can be slower, up to the better part of a second, because it's ambient rather than feedback.
- On leave: the return can be as fast or faster than the entry.
Avoid the default ease curve for these: easing curves for UI animation explains why and what to use. Hover movement should also respect the reduced-motion setting.
What Anticode checks
Anticode's Critic includes two checks aimed at hover habits: it flags hover states that only fade the opacity, and it flags pages where every card lifts on hover. Neither is a style preference; both target the patterns above that make clickable things harder to recognise.
Pages from the design engine use the effects in the first list instead. Product photos scale by a few per cent inside a fixed frame, and links in index lists slide their arrow four pixels to the right on hover and on keyboard focus alike. The Critic checks the stylesheet for the two patterns; it can't tell whether a hover style you add by hand is visible enough, or whether something important is hidden until hover. Check those yourself on a phone.
Questions people ask
Do hover effects work on mobile?
No. Phones have no hover, and taps can leave hover styles stuck. Make interactive things recognisable at rest and limit hover styles to devices with a fine pointer.
Should buttons change colour on hover?
Yes, a step darker or lighter is the clearest cue. Avoid fading the opacity, which lowers contrast and looks disabled.
Do hover effects slow a website down?
Colour, opacity and transform changes are cheap. Animating layout properties such as width, height or top can cause jank; prefer transform.