Animation Button Effect on Hover (CSS Snippet)

    selector{
        --size: 6px;
        --color: #ffffff;
    }
    selector a{
        position: relative;
    }
    selector a:before{
        content: '';
        position: absolute;
        top: var(--size);
        left: -10px;
        width: calc(100% + 20px);
        height: calc(100% - var(--size) * 2);
        background: var(--color);
        transition: 0.6s ease-in-out;
        transform: scaleY(1);
    }
    selector a:hover:before{
        transform: scaleY(0);
    }
    selector a:after{
        content: '';
        position: absolute;
        left: var(--size);
        top: -10px;
        height: calc(100% + 20px);
        width: calc(100% - var(--size) * 2);
        background: var(--color);
        transition: 0.5s ease-in-out;
        transform: scaleX(1);
    }
    selector a:hover:after{
        transform: scaleX(0);
    }
    selector span{
        position: relative;
        z-index: 3;
    }