Hover Transitions in CSS

From the CSS Animations cheat sheet · CSS Transitions · verified Jul 2026

Hover Transitions

Create smooth hover effects with CSS transitions

css

.button {
  background: #4CAF50;
  transition: all 0.3s ease;
}

.button:hover {
  background: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

💡 Define transition on base state, not hover state

⚡ Different transitions for hover on/off effects

📌 Combine transforms for complex hover effects

✅ Add will-change for better performance

More CSS tasks

Transition Properties
Timing Functions

Back to the full CSS Animations cheat sheet