We are going to show how to make fade hover effect when hovering your mouse cursor on a button. It’s very easy! hope everyone can make the fade effect button successfully through this CSS code!
Put this code in your HTML
<div class="fadebutton">HOVER YOUR MOUSE CURSOR HERE!</div>
Put this code in your CSS
.fadebutton {
text-align:center;
padding:20px 20px;
background:#fff;
line-height:60px;
transition: opacity 0.5s;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s ;
transition: all ease 0.5s ;
border:1px solid #ff3000;
border-radius:5px;
}
.fadebutton:hover {
background:#ff3000;
color:#fff;
-webkit-transition: all ease 0.7s;
-moz-transition: all ease 0.7s;
-o-transition: all ease 0.7s;
-ms-transition: all ease 0.7s ;
transition: all ease 0.5s ;
}