Hallo Matinee,

probiere mal :focus-visible statt :focus.

Damit solltest Du den Fokusring nur bei Tastaturnavigation sehen.

Darf ich Dir übrigens die :is()-Pseudoklasse und CSS-Schachtelung ans Herz legen? Das spart Schreibarbeit und Wiederholungen in den Selektoren.

Alt

button.headnav-button:focus, button.sidenav-button:focus {
   outline: 4px solid #a00565;
   outline-offset: -9px; 
}
button.headnav-button:active, button.sidenav-button:active {
   background-color: #c1ffc1;
}

Modern

button:is(.headnav-button, .sidenav-button) {
   &:hover {
      box-shadow: 0px 0px 0px 4px #fca497;
   }
   &:focus-visible {
      outline: 4px solid #a00565;
      outline-offset: -9px; 
   }
   &:active {
      background-color: #c1ffc1;
   }
}

Das & ist nicht immer nötig, hier aber schon, weil der äußere Selektor erweitert werden soll.

Rolf