Give a hover and focus state a smooth transition

Why does every button on the page just snap between states instead of easing?

Beginner to intermediateRead 4 minDoing: 20 to 30 minutes5 steps

▶ Start

What you'll have at the end

A button or link that eases smoothly into its hover and focus colors instead of jumping instantly

Before you start

You need

A button or link already styled at rest and on hover, with the right colors in the right places, where the change between them just happens instantly instead of easing.

Not covered

Choosing the hover color itself, the focus ring's own color or contrast, or building a multi-step sequence with keyframes; this only covers timing the change between two states that already look right.

Leans on

5 steps

Where to go next

Form inputs and buttons that look the same in every browser

if this button does not look the same across browsers at rest yet, sort that out before layering a transition on top of it

Checked 20 Aug 2026

Part of the CSS cookbook