Problem description

You are given a horizontal button group containing three icon-only buttons. Each button has an accessible label (aria-label, such as “Bold”, “Italic”, and “Underline”) and displays only an SVG icon. All buttons have the class .toolbar-btn, and the container uses .toolbar-group.

Write CSS to meet the following requirements:

• All buttons should look visually grouped, with equal spacing and a shared background.

• Only the button in the :focus state (e.g., when tabbed to or navigated via arrow keys) should display a thick blue outline (3px solid #2684FF) outside the button.

• The focus ring must not overlap the icon and must remain visible regardless of background or group layout.

• Buttons should have circular backgrounds, change background-color on :hover, and suppress the browser default outline.

• Anticipate use with roving tabindex (though you do not need to implement JS).

Goal

Style the button group so keyboard users can clearly see which icon button is focused, while mouse users get clear hover effects, and visual grouping is maintained for all states.

Constraints

• Do not use JavaScript or change HTML structure.

• The solution must work for both LTR and RTL layouts.

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.