Animate transition on mouse over hover a button - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Button

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Button

Description

Animate transition on mouse over hover a button

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
input[type="button"] {
   margin:11px 6px 11px 6px;
   -webkit-appearance:button;
   cursor:pointer;
   font-weight:normal;
   font-size:14px;
   padding:10px 16px;
   text-transform:uppercase;
   -webkit-box-sizing:content-box;<!--from ww  w.j  a  va 2s.  co  m-->
   -moz-box-sizing:content-box;
   box-sizing:content-box;
   box-shadow:none;
   cursor:pointer;
   border:3px solid Chartreuse;
   -webkit-border-radius:41px;
   border-radius:41px;
   color:yellow;
   text-align:center;
   -o-text-overflow:clip;
   text-overflow:clip;
   letter-spacing:2px;
   background:blue;
   transition:0.4s;
}

input[type="button"]:hover {
   background:pink;
   border:3px solid WhiteSmoke;
   color:OrangeRed;
   -webkit-box-shadow:0px 3px 8px -2px grey;
   -moz-box-shadow:0px 3px 8px -2px BlueViolet;
   -o-box-shadow:0px 3px 8px -2px Chartreuse;
   box-shadow:0px 3px 8px -2px yellow;
}

html input[type="button"]:active {
   border:3px solid blue;
   background:pink;
   color:WhiteSmoke;
   -webkit-box-shadow:0px 2px 2px 0px OrangeRed;
   -moz-box-shadow:0px 2px 2px 0px grey;
   -o-box-shadow:0px 2px 2px 0px BlueViolet;
   box-shadow:0px 2px 2px 0px Chartreuse;
}

html input[type="button"]:disabled,
.form-submit input[type="submit"]:disabled {
   -webkit-transition:all .3s ease-in-out 3s;
   -moz-transition:all .3s ease-in-out 3s;
   -o-transition:all .3s ease-in-out 3s;
   transition:all .3s ease-in-out 3s;
   cursor:default;
   background-color:yellow;
   border:3px solid blue;
   color:pink;
   box-shadow:none;
}
</style> 
 </head> 
 <body> 
  <input value="Download" type="button" onclick="this.disabled=true; this.value='Starting..';location.href='#'">  
 </body>
</html>

Related Tutorials