Project 12: Product Landing Page

CSS Stylist

Builds on these lessons

Step 1 of 2

Project

A Smooth Hover Transition

Add transition: transform 0.2s ease, box-shadow 0.2s ease to .btn-cta, then change its transform and box-shadow on :hover. Without the transition property those changes would snap instantly; with it, the browser animates smoothly between the two states.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

.btn-cta {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

← Previous Next →