Custom focus styles

Sample:

Code:

<style>
  /* Styles for keyboard users */
   button:focus-visible {
    outline: 0.25em dashed black;
  }

  /* Styles for users of pointing devices */
   button:focus:not(:focus-visible) {
    outline: none;
    box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
  }
</style>

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