Hover to slide background - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover

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

Description

Hover to slide background

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
a {<!--   ww w.j  av  a 2  s  .co m-->
   text-decoration:none;
   color:Chartreuse;
}

a span {
   display:inline-block;
   overflow:hidden;
   position:relative;
   z-index:2;
   padding:11px 16px;
   border:2px solid yellow;
}

a span:after {
   position:absolute;
   top:0;
   left:-100%;
   z-index:-2;
   width:100%;
   height:100%;
   content:"";
   background:blue;
   -webkit-transition:left 0.2s ease;
}

a:hover span:after {
   left:0;
}
</style> 
 </head> 
 <body translate="no"> 
  <a href="#"> <span>Lorem</span> </a>  
 </body>
</html>

Related Tutorials