<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.