Buttons, Baby!

Standard <button>.

Button ausm Layout.

Hover

:hover

@media(hover: hover)

Focus

:hover, :focus, gleich

:hover, :focus, differenziert

:hover, :focus-visible

Alles zusammen

@media(hover: hover), :focus-visible,

@media(hover: hover), :focus-visible, :active

scss-mixin

@mixin hover-active() {
    @media (hover: hover) {
        &:not(:disabled):hover {
            @content;
        }
    }
    &:not(:disabled):active {
        @content;
    }
}

Im Einsatz

button{
    background-color: cyan;
    @include hover-active {
        background-color: green;
    }
    &:focus-visible {
        outline: 2px solid green;
        outline-offset: 2px;
    }
}