<div>
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
  <button>Button 5</button>
</div>

body:not(.mouse-active) {
  button:focus {
    border: 1px solid red;
    background: black;
    color: white;
  }
}

div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

button {
  margin: 0.5rem;
}

const CHAR_TAB = 9

document.body.addEventListener('mousedown', function() {
  document.body.classList.add('mouse-active');
});

document.body.addEventListener('keydown', function(event) {
  if (event.keyCode === CHAR_TAB) {
    document.body.classList.remove('mouse-active');
  }
});