Hover and focus together

Give a button feedback for both mouse and keyboard users.

What to build

One rule, applying to two states.

Requirements

• .save:hover and .save:focus-visible both have a background of teal and a text colour of white.
• They share one rule, using a comma.

Constraints

Do not write outline: none.

Example

a:hover, a:focus-visible { color: crimson; }

Why it works

Keyboard users never trigger hover, so both states need the same feedback.

Hints

Solution

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>States</title>
  <style>
    .save:hover, .save:focus-visible {
      background: teal;
      color: white;
    }
  </style>
</head>
<body>
  <button class="save">Save</button>
</body>
</html>

Lesson: Pseudo-classes and pseudo-elements →