html - 如何设置悬停后过渡的持续时间

Question

我想在从按钮悬停后获得相同的时间(0.4 秒)(现在是 0 秒)。 如果我从按钮上悬停，则没有过渡。 悬停后花了 0 秒。我想要 0.4 就像它处于悬停状态一样。

.btn_akoo {

text-transform: uppercase;
background-color:#e92741;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
border:3px solid #f5f487;
display:inline-block;
cursor:pointer;
color:#2d2f3c;
font-family:Verdana;
font-size:17px;
font-weight:bold;
padding:30px 18px;
text-decoration:none;
position: relative;
margin-left: 38%;
margin-top: 18%;

}

.btn_akoo:hover {
background: #2d2f3c;
color: #e92741;
padding-left: 30px;
padding-right: 30px;
-webkit-box-shadow:0px 0px 40px 1px #f5f487 ;
-moz-box-shadow:0px 0px 40px 1px #f5f487 ;
box-shadow:0px 0px 40px 1px #f5f487 ;
transition:  0.4s ;

}

<div class="wrapper_akoo">
  <a class="btn_akoo" href="#" >Ako sa zaregistrovať?</a>
</div>

Answer 1

在基类中设置过渡而不是 :hover 状态:

.btn_akoo {
  text-transform: uppercase;
  background-color: #e92741;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  border: 3px solid #f5f487;
  display: inline-block;
  cursor: pointer;
  color: #2d2f3c;
  font-family: Verdana;
  font-size: 17px;
  font-weight: bold;
  padding: 30px 18px;
  text-decoration: none;
  position: relative;
  margin-left: 38%;
  margin-top: 18%;
  transition: 0.4s;
}

.btn_akoo:hover {
  background: #2d2f3c;
  color: #e92741;
  padding-left: 30px;
  padding-right: 30px;
  -webkit-box-shadow: 0px 0px 40px 1px #f5f487;
  -moz-box-shadow: 0px 0px 40px 1px #f5f487;
  box-shadow: 0px 0px 40px 1px #f5f487;
}

<div class="wrapper_akoo">
  <a class="btn_akoo" href="#">Ako sa zaregistrovať?</a>
</div>