Button background changing on hover - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Button

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

Description

Button background changing on hover

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">

.downloadbtn{<!--from   w ww .  ja v  a 2 s .com-->
   color: white;
   display: block;
   margin: auto;
   width: 250px;
   height: 60px;
   margin-top: 30px;
   padding: 20px;
   background: #06bce4;
   background: -moz-linear-gradient(top,  #06bce4 0%, #0589d4 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#06bce4), color-stop(100%,#0589d4));
   background: -webkit-linear-gradient(top,  #06bce4 0%,#0589d4 100%);
   background: -o-linear-gradient(top,  #06bce4 0%,#0589d4 100%);
   background: -ms-linear-gradient(top,  #06bce4 0%,#0589d4 100%);
   background: linear-gradient(to bottom,  #06bce4 0%,#0589d4 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#06bce4', endColorstr='#0589d4',GradientType=0 );
   border: 1px solid #076ca0;
   border-radius: 4px;
   -webkit-box-shadow: inset 0px 1px 0px 0px rgba(64, 209, 236, 1);
   -moz-box-shadow:    inset 0px 1px 0px 0px rgba(64, 209, 236, 1);
   box-shadow:         inset 0px 1px 0px 0px rgba(64, 209, 236, 1);
   -webkit-animation-delay: 2s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-duration: 6s;
   -moz-animation-delay: 2s;
   -moz-animation-iteration-count: infinite;
   -webkit-animation-duration: 6s;
}
.downloadbtn:hover{
   background: green;
}


      </style> 
 </head> 
 <body> 
  <a href="#" class="downloadbtn"> </a>  
 </body>
</html>

Related Tutorials