Efecto de transición con colores degradados con css

[WebSalvador]

Buenos días muchas gracias por su interés en mi pregunta, resulta que se me ocurrió la idea de crear un botón con degradado valiendome del atributo linear-gradient de la porpiedad background de css, pero al pasar el mouse por encima cambie de colores en su degradado, eso realmente si se puede hacer, pero yo lo quiero con transición para que no se vea el efecto de manera brusca, busque mucha información , pero hasta en este foro dicen que aun no se puede hacer, pero encontre este enlace que parece que si se puede "http://fortis7.moutheme.com/home-section-2/" debajo del slider se ve tres botones redondos y si tiene transición y degradado una magnifica combinación, he tratado de hacer este efecto, pero no lo logro, este es mi código:

Código PHP:

  .services_medium { 
width: 102px; 
height: 102px; 
border-radius: 50%; 
-webkit-border-radius: 50%; 
-moz-border-radius: 50%; 
position: relative; 
background: rgba(194, 195, 201, 0.95); 
background: -moz-linear-gradient(top, rgba(194, 195, 201, 0.95) 0%, rgba(247, 247, 247, 0.95) 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(194, 195, 201, 0.95)), color-stop(100%,rgba(247, 247, 247, 0.95))); 
background: -webkit-linear-gradient(top, rgba(194, 195, 201, 0.95) 0%, rgba(247, 247, 247, 0.95) 100%); 
background: -o-linear-gradient(top, rgba(194, 195, 201, 0.95) 0%, rgba(247, 247, 247, 0.95) 100%); 
background: -ms-linear-gradient(top, rgba(194, 195, 201, 0.95) 0%, rgba(247, 247, 247, 0.95) 100%); 
background: linear-gradient(to bottom, rgba(194, 195, 201, 0.95) 0%, rgba(247, 247, 247, 0.95) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(194, 195, 201, 0.95)', endColorstr='rgba(247, 247, 247, 0.95)',GradientType=0 ); 
-webkit-transition: background 0.4s ease ; 
-moz-transition: background 0.4s ease; 
-ms-transition: background 0.4s ease; 
-o-transition: background 0.4s ease; 
transition: background 0.4s ease; 
margin:0 auto 15px auto; 
} 
 
.services_medium:hover { 
background: rgba(50, 150, 200, 0.95); 
background: -moz-linear-gradient(top, rgba(50, 150, 200, 0.95) 0%, rgba(35, 80, 115, 0.95) 50%, rgba(0,31, 61, 0.95) 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(50, 150, 200, 0.95)), color-stop(100%,rgba(0,31, 61, 0.95))); 
background: -webkit-linear-gradient(top, rgba(50, 150, 200, 0.95) 0%, rgba(35, 80, 115, 0.95) 50%, rgba(0,31, 61, 0.95) 100%); 
background: -o-linear-gradient(top, rgba(50, 150, 200, 0.95) 0%, rgba(35, 80, 115, 0.95) 50%, rgba(0,31, 61, 0.95) 100%); 
background: -ms-linear-gradient(top, rgba(50, 150, 200, 0.95) 0%, rgba(35, 80, 115, 0.95) 50%, rgba(0,31, 61, 0.95) 100%); 
background: linear-gradient(to bottom, rgba(50, 150, 200, 0.95) 0%, rgba(35, 80, 115, 0.95) 50%, rgba(0,31, 61, 0.95) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(50, 150, 200, 0.95)', endColorstr='rgba(0,31, 61, 0.95)',GradientType=0 ); 
-webkit-transition: background 0.4s ease; 
-moz-transition: background 0.4s ease; 
-ms-transition: background 0.4s ease; 
-o-transition: background 0.4s ease; 
transition: background 0.4s ease; 
}  
   

Pero no se puede hacer la transición, pero cuando le pongo un color solido si se aprecia la transición, debo estar pasando algo por alto pero me rompo la cabeza y no logro a entenderlo, espero me puedan dar apoyo, para lograr este efecto.

[pzin]

No se puede hacer.

Y en esa web tampoco lo hacen. Ahí lo que hacen es tener un elemento con degradado donde cambian su opacidad; cuando no hay color, realmente el elemento no se ve, sólo cuando aparece el color. Y esa es la transición que tiene.

Sólo tienes que mirar un poco el código fuente.

[lievanosan]

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.

[WebSalvador]

Muchas Gracias, busque y realmente no encontre la manera de hacerlo, pero si pude realizar el efecto, ya estaré subiendo el código para realizarlo.