CSS Button Hover Effect with Multiple Transitions

Multi-Property Button Hover

A well-crafted button hover effect combines multiple properties to create a satisfying, professional interaction. The most common combination is background color change, slight scale/lift, and shadow enhancement.

CSS Code

.btn {
  background-color: #3b82f6;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
  transition: background-color 0.2s ease-in-out,
              transform 0.2s ease-out,
              box-shadow 0.2s ease-in-out;
}

.btn:hover {
  background-color: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Breaking Down the Effect

1. Background color darkens to signal interactivity
2. Transform translateY(-2px) lifts the button slightly, creating depth
3. Box-shadow expands and gains a colored tint, simulating elevation
4. Active state presses the button back down, completing the tactile feel

Why Separate Timing Functions?

Notice that transform uses ease-out while color and shadow use ease-in-out. The ease-out on transform makes the upward lift feel responsive (fast start), while ease-in-out on color provides a balanced, symmetrical transition.

Keeping Durations Consistent

All three transitions use 0.2s so they start and end together. Mismatched durations can create a disjointed feel where one property finishes before the others.