Problem description

Given an HTML page with a button <button class="keyboard-focus">Accessible Action</button>, write CSS to meet the following requirements:

• When the button receives keyboard focus (e.g., by pressing “Tab’’), display a visible 3px solid #2684FF (blue) outline-offset by 2px.

• When the button is clicked with a mouse, the custom focus ring should not appear.

• Use the :focus-visible pseudo-class.

• Remove any default browser outline.

Goal

Demonstrate how to use the :focus-visible selector to provide an accessible and visually clear focus ring only for keyboard users, improving both accessibility and aesthetics.

Constraints

Do not use JavaScript or change HTML structure.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.