How can I create this button hover animation

This is how it looks before hover:

After it’s been hovered:

I will appreciate y’all help

Show us the code you’ve got so far.

Thanks… here is the link to the codepen of what I have done
https://codepen.io/Que0/pen/eYdKrax

That looks good. What’s the problem or what do you want done differently?

If you mean the gradient on the button you can just change that on hover.

button:hover {
  background-image: linear-gradient(to right, #7b7ff6, #1ca7ec);
}

If you want the gradient transitioned then css doesn’t allow transitions on linear gradients and would need another approach such as having the new gradient on another pseudo element and then swapping between the two on hover.

e.g. roughly like this:

button:after {
  content: "Hover Me";
  opacity: 0;
  z-index: -1;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: linear-gradient(to right, #7b7ff6, #1ca7ec);
  padding: 0.5em 1em;
  font-size: 1.2rem;
  letter-spacing: 1px;
  transition: 0.5s ease;
}
button:hover:after {
  opacity: 1;
  z-index: 2;
}

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.