One-button transition to gradient [duplicate] - html

Question

This question already has answers here:
Use CSS3 transitions with gradient backgrounds
(19 answers)
Closed last year.
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>

Answer 1

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>