Use :focus-visible instead of :focus, because it will only show when helpful.

:focus-visible only shows focus styling when the browser determines keyboard navigation is being used, unlike :focus which triggers on all interactions including mouse clicks.

button:focus-visible { outline: 2px solid blue; }

This prevents the “clicked button stays highlighted” problem while preserving accessibility for keyboard users. Full browser logic on MDN.