Project 7: Animated Buttons

Project 7: Animated Buttons

Buttons that react: hovers, transitions and a bouncing keyframe.

The three moves

.btn {
  transition: transform 0.2s ease, background 0.2s ease;
}
.btn:hover {
  transform: translateY(-2px);
  background: #46a302;
}
.btn.is-busy {
  animation: bob 0.8s infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

Understand it

• transition smoothly eases property jumps when the state changes.
• :hover is the trigger - transitions run on change.
• @keyframes defines reusable motion stages; animation attaches them.
• infinite repeats the loop forever; add ease-in-out for polish.

Your mission

1. One button that grows or lifts on hover.
2. One that changes color with a transition.
3. One that loops a keyframe animation when it has a class.
4. Respect prefers-reduced-motion? Pro: @media (prefers-reduced-motion: reduce) - turn it off.

Checklist

• [ ] Transition on at least one button
• [ ] A :hover state
• [ ] One @keyframes animation running with infinite
• [ ] Reduced-motion media query handling

TL;DR

transition = smooth property change; @keyframes = reusable loops; hover triggers the show.