.slide-color {
    display: inline-block;
    position: relative;
    background: rgba(0, 0, 0, 0);
    border: none;
    z-index: 0;
}

.slide-color::before {
    content: "";
    position: absolute;
    top: var(--veffect, 0);
    left: var(--heffect, -300%);
    width: 100%;
    height: 100%;
    background: var(--bg, blue);
    transition: top 0.4s linear, left 0.4s linear;
    transition-delay: var(--del, 0);
    z-index: -1;
}

.slide-color:hover::before {
    top: 0;
    left: 0;
}

.slide-color a{
    transition: filter 0.4s ease;
    filter: invert(0);
}

.slide-color:hover a{
    filter: invert(1);
}