<script src="https://unpkg.com/focus-visible@5.1.0/dist/focus-visible.js"></script>

<p>Click on the button using a mouse. Then try tabbing to the button.</p>
<button>Custom Button</button>

button {
  background-color: #c2185b;
  color: white;
  font-size: 1.5rem;
  border: none;
  border-radius: 1em;
  padding: .5em 1em;
}

/* Keyboard will use a large outline. */
.js-focus-visible button.focus-visible {
  outline: 4px dashed black;
}

/* Mouse/Touch will use a subtle drop shadow. */
.js-focus-visible button:focus:not(.focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}