Button Hover Transition Easing

Button Hover Easing

Button hover effects are among the most frequent animations on any website. They need to be fast (under 200ms) and responsive — the user should feel immediate feedback.

Recommended Curve

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

This is the CSS ease keyword — quick acceleration, gradual deceleration. For hover effects, this asymmetry is ideal because it provides immediate visual feedback (fast start) while ending smoothly (slow finish).

Duration Guidelines

Property	Duration	Reason
Background color	100–150ms	Color changes are perceived instantly
Box shadow / elevation	150–200ms	Shadow shifts benefit from slightly longer duration
Transform (scale/translate)	150–200ms	Movement needs enough time to be perceived
Border color	100–150ms	Subtle change, fast response

Code Example

.btn {
  background: hsl(220, 90%, 56%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transform: translateY(0);
  transition:
    background 150ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}
.btn:hover {
  background: hsl(220, 90%, 48%);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transition-duration: 50ms;
}

The Active State Trick

Notice the :active state uses a much shorter duration (50ms). When the user clicks, the button should snap back to its pressed state almost instantly to feel tactile. This asymmetry — slow hover, fast click — creates a satisfying interaction.

Alternative: Slightly Snappier

For a more modern, snappier feel, try:

transition-timing-function: cubic-bezier(0.2, 0, 0, 1);

This curve accelerates very quickly and has an extended deceleration, making the transition feel more instant while still ending smoothly.