Problem with Hover effect with CSS in HTML

Navigation
1

I have a problem with the :hover effect used in the CSS language to style an element.

It turns out that I have a button that should change color every time you mouse over it, with the effect :hover I set a time of 3 seconds of duration that it takes to change the background color but does not take it , makes it instantaneous .

I leave the button that 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 any way to make me take the time that I set, or instead force the browser to take it?

    
asked by M4uriXD 13.11.2018 в 22:32
source

3 answers

2

You have poorly written CSS , try the following code and then solve the color theme. 

.btn_login {
        width: 35%;
        height: 45px;
        font-size: 14pt;
        color: white;
   }
   .btn_login:hover {
        color: blue;
        transition: all 3.0s ease-in !important;
   }
<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="css.css">
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
  <input type="submit" class="btn_login">

</body>
</html>
    
answered by 14.11.2018 / 00:01
source
1

This is what I tried, you are calling some properties twice in the hover, it is not necessary to run them if they are the same, as I understand transition-delay does not support linear-gradient , so I replaced it with a filter that gives a similar result. 

.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;
        
         transition-duration: .5s;
        -moz-transition-duration: .5s;
        -ms-transition-duration: .5s;
        -o-transition-duration: .5s;
        
        outline-style: none !important;
   }
   
   .btn_login:hover{

        filter: brightness(80%);
        transition-delay: 3s;
   }
<form action="#" metod="POST">
<br>
  <input type="submit" class="btn_login">
</form>
    
answered by 13.11.2018 в 23:49
0

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 (just 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 you can not animate from "not existing" to "exist", but you have to encourage "to pass from such been "to" such status "

.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;
        
         transition-duration: .5s;
        -moz-transition-duration: .5s;
        -ms-transition-duration: .5s;
        -o-transition-duration: .5s;
        transition-delay: 3s;
        outline-style: none !important;
        filter: none;
   }
   
   .btn_login:hover{

        filter: brightness(80%);

   }
<form action="#" metod="POST">
<br>
  <input type="submit" class="btn_login">
</form>
    
answered by 14.11.2018 в 11:52
Problem with FOR loops How can I improve the performance of the next query? ... it takes too long to get the result