I have a problem with the effect :hover
used in the CSS language to style an element.
It turns out that I have a button that must change color every time the mouse is over it, with the effect :hover
I established a time of 3 seconds duration that takes time to change the background color but it does not take it , it does it instantaneously .
I leave the button I have:
.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>
Is there a way to make it take the duration time I set for it, or force the browser to take it instead?
You have misspelled the
CSS
, try the following code and then resolve the color issue.This is what I tried, you are calling some properties twice on hover, they don't need to be executed if they are the same, as far as I understand
transition-delay
it doesn't supportlinear-gradient
, so I replaced it with a filter which gives a similar result.You have to put all the properties related to the transition in
.btn_login
, not in.btn_login:hover
and also put a filter in.btn_login
because otherwise there is no real transition from one state to another (as you had it, when it is not hover there is neither the state nor the transition) You must be clear that if you put the filter (or whatever you want to animate) only in hover it is not possible to animate it, because it cannot be animated from "not exist" to "exist", but you have to animate from "pass from such a state" to "such a state"