Challenge 4 of 5

Challenge 4: Add a hover effect

Your first CSS pseudo-class. Makes pages feel alive.

0 of 5 complete 4/5 ✓ Completed

What you're building

Use the :hover pseudo-class to change something — a button, a link, a card — when the cursor lands on it. This is where "static web page" becomes "interactive web page."

How the editor knows you're done

The code contains :hover somewhere in the CSS.

A starting point

Add this to the CSS panel (assuming you have a <button> from Challenge 2 — if not, drop one in first):

button:hover {
  background: #1d4ed8;
  transform: scale(1.05);
  transition: all 0.15s ease;
}

Move your cursor over the button in the preview. The transition line is the secret sauce — without it the change snaps; with it, it glides.

Open in editor → Back to all challenges →