@evilcss/std/button-with-outline.classes.css

Awesome CSS design system and UI widgets

.std-button {
    outline-offset: var(--outline-offset, 2px);
    outline-width: var(--outline-width, 2px);
    outline-style: solid;
    outline-color: transparent;
}
.std-button:focus-visible {
    outline-color: var(--outline-color, var(--button-accent, var(--std-color-primary-accent, deepskyblue)));
}
@supports not selector(:focus-visible) {
    /*
    * :focus-visible is not supported by Safari yet, but it is coming.
    * In the meantime we can use "@supports selector()" which is supported
    * since Safari 14.1.
    *
    * :focus:not(:focus-visible) is treated as :focus on Chrome, so it is useless.
    */
    .std-button:focus {
        outline-color: var(--outline-color, var(--button-accent, var(--std-color-primary-accent, deepskyblue)));
    }
}
.std-button:focus:hover,
.std-button:focus:active,
.std-button:focus:hover:active {
    outline-color: transparent;
}