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.