0x70Lesson 8 of 9

Style interactive states

Use pseudo-classes and transitions to make interactions clearer.

15 min 5-question quiz 1 code exercise

By the end of this lesson you can

Style hover and focus states
Add smooth transitions
Keep interaction feedback accessible

Pseudo-classes such as :hover and :focus-visible style elements based on interaction state. Clear state styling helps people understand what is interactive and where keyboard focus currently is.

button.css

1.cta {
2  background: #165b33;
3  color: white;
4  transition: background-color 160ms ease;
5}
6
7.cta:hover,
8.cta:focus-visible {
9  background: #124727;
10}

Output

The button darkens on hover and keyboard focus

Transitions should be subtle and quick. Keep focus styles visible for keyboard users; avoid removing outlines unless you replace them with an equally clear alternative.

Key takeaways

State styles make interfaces easier to use.
Hover and focus styles should remain readable.
Use small transition durations for responsive feel.

Lesson quiz

5 questions · pass with 4 correct · up to 50 XP

Passing this quiz completes the lesson and keeps your streak going. Questions you miss come back in review sessions later.

Practice: write CSS

Style the sample page, see your changes in the sandboxed preview, and run checks against the computed styles.

Exercise 1

Style button interaction states

+25 XP

Set .cta background color to #165b33 with text color white. Add transition: background-color 160ms ease. On both :hover and :focus-visible, change background to #124727.

CTA base styles

styles.css

Loading editor…

Styled page preview

Your CSS is applied to a sample page in a sandboxed preview. Tests check computed styles.

Questions about this lesson

Stuck? Ask. Figured something out? Share it. Explaining is one of the best ways to learn.

Loading posts…