.tip

outline: none on a button takes the ring away from someone who got there with Tab and has nothing else telling them where they are. Browsers only draw their own ring on keyboard focus, so it's the reset that breaks things.

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

A mouse click only matches :focus, so the ring stays off the pointer path for free. Text inputs match both, since typing comes next. outline follows border-radius, and the offset keeps it clear of your border.