<p>Use the tab key to navigate</p>
<div class="container">
  <button class="button">Visible Button</button>
  <button class="button sr-only visually-hidden" id="hidden">Hidden Button</button>
  <button class="button">Visible Button</button>
</div>

:root {
  --bg-color: #fff;
}

body {
  padding-top: 80px;
  background-color: var(--bg-color);
}

p {
  font-size: 200%;
  padding-left: 60px;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 40px;
  background-color: var(--bg-color);
}

.button {
  font-size: 100%;
  padding: 0.5em 1em;
  color: rgba(0, 0, 0, 0.8);
  border: transparent;
  background-color: #e6e6e6;
  text-decoration: none;
  border-radius: 2px;
  margin: 0 1em;
  cursor: pointer;
}

.button:hover {
  background-color: cornflowerblue;
}

.button:focus {
  background-color: tomato;
}

/**
 * Accesible way to hide things in CSS.
*/

.visually-hidden {
  z-index: -1;
}

.visually-hidden:focus {
  z-index: 2;
}

/*
 * https://css-tricks.com/comparing-various-ways-to-hide-things-in-css/#comment-1764546
 */