CSS button animation to do background slide - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Button

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

Description

CSS button animation to do background slide

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

.button-blue {<!--from  ww  w .  ja v  a2  s. c  om-->
   display: block;
   width: 100px;
   height: 35px;
   border: #fbfbfb solid 4px;
   cursor: pointer;
   background: black;
   color: white;
   font-size: 12px;
   padding-top: 8px;
   padding-bottom: 12px;
   margin-left: auto;
   margin-right: auto;
   font-weight: 700;
}
.submit {
   display: inline;
   text-align: center;
   height: 35px;
}
.my {
   display: 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: black;
   -webkit-transition-property: color;
   transition-property: color;
   -webkit-transition-duration: 0.5s;
   transition-duration: 0.5s;
}
.my:before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background: #fbfbfb;
   -webkit-transform: scaleX(0);
   transform: scaleX(0);
   -webkit-transform-origin: 50%;
   transform-origin: 50%;
   -webkit-transition-property: transform;
   transition-property: transform;
   -webkit-transition-duration: 0.5s;
   transition-duration: 0.5s;
   -webkit-transition-timing-function: ease-out;
   transition-timing-function: ease-out;
}
.my:hover,
.my:focus,
.my:active {
   color: black;
}
.my:hover:before,
.my:focus:before,
.my:active:before {
   -webkit-transform: scaleX(1);
   transform: scaleX(1);
}


      </style> 
 </head> 
 <body> 
  <div class="submit"> 
   <button type="submit" class="button-blue my">this is a test</button> 
  </div>  
 </body>
</html>

Related Tutorials