Button - Hover Event

 

 

 

코드

.btn {
    position: relative;
    background: none;
    border: solid 1px #121212;

    transition: color 200ms;
}

.btn:is(:hover,:focus) {
    color: white;
}

.btn::after {
    position: absolute;
    content: '';
    inset: 0;
    z-index: -1;

    background-color: #121212;

    transform-origin: left;
    transform: scaleX(0);
    transition: transform 200ms;
}

.btn:is(:hover, :focus)::after {
    transform: scale(1);
}