Archived topic
button gradient hover
1 reply · Started by _blank on February 7, 2020
Viewing posts 1–2 of 2
Hi!
how can I make my links hover as a gradient-like this
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.
This archived topic is closed to new replies.