[Resolved] button gradient hover

Home Forums Support button gradient hover

  • This topic has 1 reply, 2 voices, and was last updated 5 months ago by David.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1157712
    Abhishek

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

    #1157789
    David
    Staff
    Customer Support

    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.