Problem description

Given an HTML page with a <button class="accessible-btn">Click Me</button>, write CSS to meet the following requirements:

• When the button is focused (for example, using the “Tab’’ key), it should display a clear, visible outline.

• The outline must be 2px solid blue (#2684FF).

• The outline should be offset by 2px, so it sits outside the button’s border.

• The default browser outline should not appear; only your custom outline should show.

Goal

Ensure the button has a custom, visually clear focus indicator for accessibility, making keyboard navigation and usage more user-friendly.

Constraints

• Use CSS only.

• 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.