custom-button {
display: inline-block;
margin: 10px;
}
custom-button:focus {
/* Provide a fallback style for browsers
that don't support :focus-visible */
outline: 2px solid red;
background: lightgrey;
}
custom-button:focus:not(:focus-visible) {
/* Remove the focus indicator on mouse-focus for browsers
that do support :focus-visible */
background: transparent;
}
custom-button:focus-visible {
/* Draw a very noticeable focus style for
keyboard-focus on browsers that do support
:focus-visible */
outline: 4px dashed darkorange;
background: transparent;
}