UI & components

CSS hover effects and click animations

CSS hover effects and click animations are the small rewards that make an interface feel alive. Each one here runs live: hover it, click it, then switch to phone width to see what it does when there is no cursor at all.

2 prompts

Prompts

Guide

How to prompt a hover effect that works everywhere

  • Plan for touch. Phones have no hover, so say what happens instead.
  • Keep it fast. Effects should follow the pointer within a frame.
  • Respect reduced motion. Ask for a still version when the system requests it.