Buen día, en efecto, no es posible añadir un efecto para ir de gradient a gradient, sin embargo lo que nosotros hacemos para crear este efecto es jugar con la propiedad background-position, al background-position si le puedes añadir efecto de transición, de modo que la idea que te muestro es la siguiente:
Primero tu gradient, debes partirlo en dos, el 50% del gradient será el estilo que deseas mostrar en un inicio y el restante siguiente 50% es el estilo final, cuando hagas la transición, de modo que tu gradient, al inicio únicamente se mostrará al 50% y lugo añadiendo un efecto de transición al background-position se mostrará el otro 50% restante y el primer 50% del gradient desaparece (espero expresarme con claridad, si no lo he logrado no dudes en indicarme tus dudas).
Te colocaré el código que usamos para hacer este efecto
Primero el código del botón en su estado inicial:
Código:
.boton{
background: linear-gradient(to bottom, #ffec64 1%, #ffab23 40%, #ffec64 74%) repeat scroll 0 0 / 1px 80px rgba(0, 0, 0, 0);
border: 1px solid #ffaa22;
border-radius: 6px;
box-shadow: 0 1px 0 0 #fff6af;
color: #333333;
display: inline-block;
font-family: arial;
font-size: 18px;
font-weight: bold;
margin: 10px;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0 1px 0 #ffee66;
transition: all 0.2s ease-in 0s;
}
Nada particularmente especial por aquí :D
Luego tenemos el código del pseudo elemento "hover" el cuál nos quedaría asi:
Código:
.boton:hover{
background-position: 160px center;
}
Cómo puedes observar, al hacer el efecto de transición en el atributo background-position, como resultado obtenemos un efecto de transición dentro de nuestro gradient, que en realidad no es el gradient el que estamos moviendo, pero nos da el efecto deseado :D
Te voy a colocar todo el código de un pequeño archivo HTML con este ejemplo para que puedas copiar y pegar, y ver el resultado:
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Boton con efecto de gradient</title>
<style media="screen" type="text/css">
.boton{
background: linear-gradient(to bottom, #ffec64 1%, #ffab23 40%, #ffec64 74%) repeat scroll 0 0 / 1px 80px rgba(0, 0, 0, 0);
border: 1px solid #ffaa22;
border-radius: 6px;
box-shadow: 0 1px 0 0 #fff6af;
color: #333333;
display: inline-block;
font-family: arial;
font-size: 18px;
font-weight: bold;
margin: 10px;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0 1px 0 #ffee66;
transition: all 0.2s ease-in 0s;
}
.boton:hover{
background-position: 160px center;
}
</style>
</head>
<body>
<a href="#" class="boton">Hola :)</a>
</body>
</html> Listo, si tienes dudas estamos para ayudar :)
Saludos.