Hover

You might say

Change the button color on hover so people know they can click it.

Respond when a pointer rests over an interactive elementHover can preview that an item is interactive or reveal secondary detail before a click. It does not exist on touch-only devices, so essential content and actions must remain available without it. Keep the visual change clear but stable.

Hover meLift + shadow + color Color on hover ControlNo reaction at all Hover each one and feel the difference between clickable and not

When to use it

Highlight a clickable card
Reveal a short secondary control
Preview link or chart detail
Support pointer users with an extra cue

When NOT to use it

Hide essential actions behind hover only
⚙There is no hover on mobile, so this hint never appears.
Move the target so much that it becomes hard to click
Apply hover styling to non-interactive content
Forget matching keyboard focus behavior

Anatomy

Hover meChange color / float / shadowtransition .15s

Hover begins the moment the pointer enters its bounds

Color change, lift, or shadow — keep it light

A 0.1–0.2s smooth switch, no jarring jumps

Variants

Color

ButtonButton

The lightest feedback for buttons and links

Lift

Cards hinting you can click through

Reveal

Doc v3 ✎ 🗑

Secondary actions stay tucked away by default

Typical use cases

Button

2026 Product Roadmap

Hovering: color change + slight lift, signaling “clickable”

Card

Hiking Trail Guide

2.3k reads · 3 days ago

Desk Setup Ideas

8.1k reads · Yesterday

Navigation link

📄 PRD v3.md10:24

📊 dashboard.fig✎🗑

🖼 cover-final.pngYesterday

Row hover: highlights the row, edit and delete fade in

Chart point

✎ Save ★ ⬇ ⋯

Hover an icon button to reveal what it does