Hover effects and transitions
Pages feel alive when they respond to the pointer. The :hover pseudo-class applies styles while the mouse is over an element: .btn:hover { background: navy; }.
On its own, the change is instant. transition animates it: transition: background 0.3s; fades the background over 0.3 seconds.
Put the transition on the normal rule, not the hover rule, so the change animates both in and out.
Example
<style>
.btn { background: teal; color: white; padding: 10px 18px; border: 0; border-radius: 8px; transition: transform 0.2s; }
.btn:hover { transform: scale(1.1); }
</style>
<button class="btn">Hover me</button>Hover doesn't exist on touch screens, so never hide important information behind it.
Your tasks
0 of 3 done- Add a .btn:hover rule
- Change the background color on hover
- Add a transition to .btn so the change animates
Tutor
The tutor guides you toward the answer instead of handing it over. It uses your own Claude usage.
Quick check
Where should the transition property usually go?
No problems found. Unclosed tags, missing semicolons and errors show up here in plain words.