Transitioning to another gradient upon hover

Question

I'm using a lot of gradients in my project, and I can't seem to figure out how to get the gradients to simply swap to another one upon hover.

Here's my CSS:

`

button {
    background: linear-gradient(45deg, #8eb5e0, #f0b7f3, #c499da, #a97dd7);
    border-style: solid ;
    border-color: white;
    background-color: plum;
    color: white;
    border-radius: 10px;
    padding: 1em;
    opacity: 100%;
    text-align: center;
    font-weight: bold;
    transition-property: border-color;
    transition-duration: 2s;
}

button:hover {
    background: linear-gradient(45deg, #e3e798, #f3e0b7, #99dab6, #7dc3d7);
    border-color: pink;
    filter: blur(2px);
}

`

I tried doing this with the same way I do any other changes that take place upon a hover: stating what the change under the :hover rule as normal. But it only breaks the remainder of the hover actions while not working.

I also tried using :after instead like another user suggested in a previous question asked on here. This did not work.

score 0 · Answer 1 · answered Dec 19 '22 at 05:25

From what I understand, I believe CSS animations still only have partial support (see here). That answer is a year old now but I can't find much info that it's changed at all (I could be wrong though). If it has support now, someone please let me know. But this has been talked about for many years now, and I usually resort to a solution like what I have below.

button {
    background: linear-gradient(45deg, #8eb5e0, #f0b7f3, #c499da, #a97dd7);
    border-style: solid ;
    border-color: white;
    background-color: plum;
    color: white;
    border-radius: 10px;
    padding: 1em;
    opacity: 100%;
    text-align: center;
    font-weight: bold;
    transition-property: border-color;
    transition-duration: 2s;
    position: relative;
}

button:after {
  content: "";
  background: linear-gradient(45deg, #e3e798, #f3e0b7, #99dab6, #7dc3d7);
  border-color: pink;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 2s;
}

button:hover {
    filter: blur(2px);
}
button:hover::after {
    opacity: 1;
}

<button>I AM A BUTTON</button>

Transitioning to another gradient upon hover

1 Answers1