0

I'm trying to create a hover effect for a button, the button before the hover only has an outline and its name inside, after the hover I would like it to have a transition to my background which is gradient, I tried several ways but it's not working .
Note: I am modifying an element of the "Elementor" Plugin in WordPress.

ul li {
  font-family: "Poppins", Sans-serif;
  font-size: 20px;
  font-weight: 500;
  padding: 25px 25px 25px 25px;
  margin: 0px 20px 50px 20px;
  background-color: #FFFFFF;
  color: var( --e-global-color-11a2147);
  border-style: solid;
  border-width: 2px 2px 2px 2px;
  border-color: var( --e-global-color-c49c864);
  border-radius: 20px 20px 20px 20px;
}

ul li:hover {
  background-color: transparent;
  background-image: linear-gradient( 90deg, #0081FF 0%, #5DE0E6 100%);
  color: #FFFFFF;
  border-style: solid;
  border-width: 0px 0px 0px 0px;
  border-radius: 20px 20px 20px 20px;
}
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Rickard Elimää
  • 7,107
  • 3
  • 14
  • 30
Gabriel Morona
  • 1
  • Hey please add html code too know the button code is an `a` or `button` tag. – Praveen Jan 14 '22 at 12:56
  • I guess using transition in gradients is not supported for now as the color needs to be changed from one to another, it can't change from one to two different colors or vice versa. – Yash Sharma Jan 14 '22 at 13:09

1 Answers1

0

you can do it like this fro transition, since transition is not available for linear gradient

ul li {
    font-family: "Poppins", Sans-serif;
    font-size: 20px;
    font-weight: 500;
    padding: 25px 25px 25px 25px;
    margin: 0px 20px 50px 20px;
    background-color: #FFFFFF;
    color: var( --e-global-color-11a2147);
    border: solid black 2px;
    border-color: var( --e-global-color-c49c864);
    border-radius: 20px 20px 20px 20px;
    position: relative;
    overflow: hidden;
    z-index: 2;
    transition: .5s ease-in-out;
}

ul li:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: linear-gradient( 90deg, #0081FF 0%, #5DE0E6 100%);
    transition: .5s ease-in-out;
    z-index: -1;
}

ul li:hover {
    color: #FFFFFF;
    border: solid transparent 2px;
    border-radius: 20px;
}

ul li:hover:after {
    opacity: 1;
}
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Krishna Devashish
  • 76
  • 6