Tengo un problema con el efecto :hover
utilizado en el lenguaje de CSS para dar estilo a un elemento.
Resulta que tengo un botón que debe cambiar de color cada vez que se pasa el mouse sobre el mismo, con el efecto :hover
le establecí un tiempo de 3 segundos de duración que demora en cambiar el color de fondo pero no lo toma, lo hace instantáneo.
Dejo el botón que tengo:
.btn_login{
border-color: #2AFF00;
border-style: ridge;
border-radius: 50px;
border-width: 7px;
box-shadow: -5px 10px 60px -10px white inset;
background: -webkit-linear-gradient(top, rgba(165, 255, 147,1) 0%, rgba(32, 205, 0,1) 52%, rgba(105, 255, 47,1) 100%);
width: 35%;
height: 45px;
font-size: 14pt;
color: white;
-webkit-transition-delay: 3s;
-moz-transition-duration: 3s;
-ms-transition-duration: 3s;
-o-transition-duration: 3s;
outline-style: none !important;
}
.btn_login:hover{
box-shadow: -5px 10px 60px -10px white inset;
color: white;
background: -webkit-linear-gradient(top, rgba(115, 173, 103,1) 0%, rgba(22, 125, 0,1) 52%, rgba(55, 155, 17,1) 100%);
-webkit-transition-duration: 3s;
-moz-transition-duration: 3s;
-ms-transition-duration: 3s;
-o-transition-duration: 3s;
}
<form action="#" metod="POST">
<br>
<input type="submit" class="btn_login">
</form>
¿Hay alguna forma de hacer que me tome el tiempo de duración que le establecí, o en cambio obligar al navegador a que lo tome?