1

I'm trying to add a transition to a button, but when I hover transition is not working. here I have a snippet of the code

https://codepen.io/rcmalonso/pen/YzvQbyo

a {
  text-decoration: none;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-learn-more {
  height: 45px;
  position: absolute;
  background: white;
  width: 190px;
  left: 45%;
  border-radius: 25px;
  background: linear-gradient(90deg, #ebe47a 0%, #e2e2e8 50%, #c966b7 100%);
  transition: all 1s ease-in-out;
}

.banner-learn-more:hover {
  background: linear-gradient(90deg, #c966b7 0%, #e2e2e8 50%, #ebe47a 100%);
}
<a href="#" class="banner-learn-more">LEARN MORE</a>
imvain2
  • 15,480
  • 1
  • 16
  • 21
Ricardo Maldonado
  • 15
  • 4
  • You won't be able to animate the linear-gradient value directly, but there are numerous workarounds to achieve the effect you desire. – Frish Nov 14 '22 at 23:05

0 Answers0