Web Animation · Exercise 4 of 4 Previous
Intermediate
Button feedback for the launch page
Give .button a 120 ms hover colour change, a press (scale(0.97) on :active) and a focus ring that only changes colour. Use var(--dur-fast) and var(--ease-out).
Requirements: the press must not apply for people who ask for less motion, a disabled button gets no hover or press, and the ring is a transparent 2px outline that turns blue (var(--blue)) on :focus-visible. Do not use transition: all.
What Check tests
- The button transitions colours and transform in 120 ms, not all
- The ring is a transparent 2px outline that is always there
- There is a :focus-visible rule that changes the outline colour
- The press (scale on :active) exists and is wrapped in prefers-reduced-motion: no-preference
- Disabled buttons are excluded from hover and press
- With reduced motion the colour transition is still there
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
animations
0.00s0.10s0.20s0.30s0.40s0.50s0.60s0.70s0.80s0.90s
Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.
frames
Console
Nothing logged yet.