The short verdict
- A hover state answers one question: can I click this?
- Generated sites often have none, or the same generic one on everything.
- A few consistent patterns, at 150 to 250 milliseconds, make a site feel built with care.
01Why it matters more than it seems
On desktop, the cursor is how a visitor feels out a page. When they point at something and it responds, they know it is interactive. When nothing happens, they have to guess, or click to find out. Multiply that by every card, button and link and the site feels slightly dead, which is exactly the “it just sits there” feeling people describe.
Generated sites tend to go one of two ways: no hover at all, or a scale-up and shadow on every element, interactive or not.
02Patterns that work
Buttons
A clear change in background or border colour, sometimes with a small movement in the icon. Keep the button’s size fixed so the layout does not jump. On this site, the arrow icon slides out and a new one slides in, and the label scrambles briefly. It is a signature, used only on buttons.
Links in text
Underline that appears, thickens or changes colour. Text links should look like links before hover too. Hover is a confirmation, not the only clue.
Cards
If the whole card is a link, the whole card should respond: a slight lift, an image zoom of a few percent, a title colour change or an arrow appearing. Pick one or two, not all four.
Navigation
A consistent indicator: an underline that slides between items, or a background pill. It should match what shows the current page.
Images and media
A gentle zoom or a reveal of a caption, only where the image is clickable. Non-interactive images should not move under the cursor.
03The numbers
- Duration: 150 to 250 milliseconds for most hover changes. Faster feels abrupt, slower feels sluggish.
- Easing: ease-out on the way in, so the change starts quickly and settles.
- Distance: lifts of 2 to 4 pixels, zooms of 2 to 5 percent. Bigger moves draw attention away from the content.
- Return: the hover-out can be slightly slower than the hover-in, so it does not snap.
“Good hover states are barely noticed. Missing ones are felt everywhere.”
04Touch screens and keyboards
Phones have no hover. Anything important that only appears on hover, like a caption or a button, is invisible on mobile. Make sure the default state shows everything people need. Use media queries for fine pointers so hover effects only run on devices that can hover, and do not leave elements stuck in a hover state after a tap.
Keyboard users need the same feedback. Every hover style should have a matching focus style, so tabbing through the page shows where you are just as clearly.
05Consistency is the point
Define hover patterns once, as part of the design system, and apply them by type: all buttons one way, all cards another. Visitors learn the language in a few seconds. When each section has its own hover, invented by a different prompt, the learning never happens.
06Questions people ask
Do hover effects slow a site down?
Not if they animate transform and opacity. Animating width, height or shadows on large areas can stutter on slower machines.
Should hover states be fun or subtle?
Mostly subtle. One distinctive pattern for your main buttons can carry the brand. The rest should just be clear.
Can I add hover states without rebuilding?
Usually yes. They are one of the quickest motion improvements on an existing site.
Can you add them to my site?
Yes, as part of our motion work. Send us the link and we will show you where they would help.
