[Resolved] button gradient hover

[_blank]

Hi!
how can I make my links hover as a gradient-like this

[David]

Hi there,

try something like this:

a:not(.button) {
    background: -webkit-gradient(linear,left top,right top,from(#ff8a00),to(#e52e71));
    background: linear-gradient(90deg,#ff8a00,#e52e71);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-size: 200%;
    background-position: left center;
    transition: 0.5s;
}

a:not(.button):hover {
    background-position: right center
}

Note this method is unsupported on some older browsers and i am not sure the hover transition will work.

[Author]

Posts