Shadow instead of outline

Recipe 6.1 Provide focus styles

Sample:

Code:

<style>
   button {
    border: none;
  }

   :focus-visible {
    --black: #0b0c0c;
    --yellow: #fd0;

    color: var(--black);
    background-color: var(--yellow);
    box-shadow: 0 -0.125em var(--yellow), 0 0.25em var(--black);
    outline: 0.25em solid transparent;
  }
</style>

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