HTML CSS examples for CSS Widget:Hover Effect
Hover effect in nav bar
<html> <head> <style> html, body { margin:0; padding:0; height:100%; background-color:Chartreuse; font-family:'Open Sans', sans-serif; } .nav-wrapper {<!--from w w w. jav a 2 s. c o m--> margin:0 auto; margin-top:51px; width:61%; padding-top:6px; padding-bottom:6px; color:yellow; box-shadow:3px 3px 4px blue; border-radius:6px; background:pink; background:-moz-linear-gradient(top, OrangeRed 0%, grey 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,BlueViolet), color-stop(100%,Chartreuse)); background:-webkit-linear-gradient(top, yellow 0%,blue 100%); background:-o-linear-gradient(top, pink 0%,OrangeRed 100%); background:-ms-linear-gradient(top, grey 0%,BlueViolet 100%); background:linear-gradient(to bottom, Chartreuse 0%,yellow 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='blue', endColorstr='pink',GradientType=0 ); } ul { list-style:none; } li { display:inline; padding:0 16px; } li:hover { box-shadow:3px 3px 4px OrangeRed inset, -3px -3px 4px grey inset; } a { text-decoration:none; color:BlueViolet; } </style> </head> <body> <nav> <div class="nav-wrapper"> <ul> <li> <a href="">Lore</a> </li> <li> <a href="">Lorem ip</a> </li> </ul> </div> </nav> </body> </html>