Hover State
States & VariantsThe visual appearance of an interactive element when a user's cursor is positioned over it, indicating that the element is clickable or interactive.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Hover State coming soon.
How It Works in Apps/Websites
Hover states provide visual feedback that tells users an element is interactive. When a cursor moves over a button, link, or card, the element changes appearance—often through color changes, shadows, underlining, or subtle animations. This creates a responsive, polished feel and helps users understand what they can interact with. Hover states are desktop-specific since touch devices don't have a cursor.
How AI Interprets This Term
When you say 'hover state', AI understands this as a visual change that occurs when the cursor is over an element. Common hover effects include: darkening or lightening the background color, adding or increasing shadow/elevation, underlining text, changing cursor to pointer, scaling up slightly (1.02-1.05x), or revealing hidden elements. The transition should be smooth (typically 150-200ms).
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create a button with a hover state that darkens the background
Design a card that on hover: lifts up with increased shadow, slightly scales to 1.02x, and reveals a 'View Details' button that was hidden
Show a button in three states side by side: default (blue), hover (darker blue with shadow), and active/pressed (even darker, pressed in)
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
Usage Guidelines
When to Use
- •On all clickable elements (buttons, links, cards)
- •Interactive table rows
- •Navigation menu items
- •Any element that responds to clicks
When NOT to Use
- •On non-interactive elements (it would be misleading)
- •When the effect would be distracting or overwhelming
- •Elements that are disabled
Related Terms
Focus State
The visual appearance of an element when it receives keyboard focus, typically shown as an outline or ring, crucial for accessibility and keyboard navigation.
Microinteraction
A small, contained interaction that accomplishes a single task, providing feedback and enhancing the user experience through subtle animations and responses.