Hover to do background transition - HTML CSS CSS Property

HTML CSS examples for CSS Property:background

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. background

Description

Hover to do background transition

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

.btn {<!--from ww  w .j a  va2 s  .  c  o m-->
   margin: 20px;
   padding: 10px 30px;
   font-size: 14px;
   text-transform: uppercase;
   color: #fff;
   border: 2px solid #f0913a;
   -webkit-border-radius: 20px;
   border-radius: 20px;
   cursor: pointer;
}
.hvr-shutter-in-horizontal {
   display: inline-block;
   vertical-align: middle;
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -moz-osx-font-smoothing: grayscale;
   position: relative;
   background: #181818;
   -webkit-transition-property: color;
   transition-property: color;
   -webkit-transition-duration: .3s;
   transition-duration: .3s;
}
.hvr-shutter-in-horizontal:before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 0;
   bottom: 0;
   left: -2px;/*equal to the border width of .btn but negated*/
   right: -2px;/*equal to the border width of .btn but negated*/
   background: #f0913a;
   -webkit-transform: scaleX(1);
   transform: scaleX(1);
   -webkit-transform-origin: 50%;
   transform-origin: 50%;
   -webkit-transition-property: transform;
   transition-property: transform;
   -webkit-transition-duration: .3s;
   transition-duration: .3s;
   -webkit-transition-timing-function: ease-out;
   transition-timing-function: ease-out;
   border-radius: inherit;
}
.hvr-shutter-in-horizontal:active:before,
.hvr-shutter-in-horizontal:focus:before,
.hvr-shutter-in-horizontal:hover:before {
   -webkit-transform: scaleX(0);
   transform: scaleX(0);
}


      </style> 
 </head> 
 <body> 
  <a href="#" class="btn hvr-shutter-in-horizontal">test</a>  
 </body>
</html>

Related Tutorials