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
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
    Save→Save
  • Reveal a short secondary control
    →
  • Preview link or chart detail
    Requirements doc v3✎ 🗑
  • Support pointer users with an extra cue
    Profit margin: gross profit ÷ revenueProfit margin ⓘ

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
    Required! You cannot submit without it.Submit
  • Apply hover styling to non-interactive content
    Hover
  • Forget matching keyboard focus behavior
    Project settingsEdit
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
Further reading
:hoverMDN ↗