Hover changes li tags with round corner - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover to change

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

Description

Hover changes li tags with round corner

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">
ul li {
   position:relative;
   top:56px;
   height:31px;
   background:Chartreuse;
   display:inline-block;
   vertical-align:top;
   width:30%;
   margin:2%;
   margin-bottom:0;
   padding:6px;
   -webkit-border-top-right-radius:31px;
   -moz-border-top-right-radius:31px;
   -ms-border-top-right-radius:31px;
   -o-border-top-right-radius:31px;
   border-top-right-radius:31px;
   -webkit-border-top-left-radius:31px;
   -moz-border-top-left-radius:31px;
   -ms-border-top-left-radius:31px;
   -o-border-top-left-radius:31px;
   border-top-left-radius:31px;
}

ul>li:hover {
   box-shadow:2px 2px 11px white;<!--from w  ww.j a  v a2s . c  om-->
   position:relative;
   top:21px;
   height:61px;
   padding-top:2.6em;
   font-size:21px;
}
</style> 
 </head> 
 <body> 
  <ul> 
   <li> <a href="#">Lore</a> </li> 
   <li> <a href="#">Lorem</a> </li> 
   <li> <a href="#">Lorem i</a> </li> 
  </ul>  
 </body>
</html>

Related Tutorials