HTML CSS examples for CSS Widget:Hover Animation
CSS hover off transition
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> li {<!-- w ww . j av a 2 s . com--> list-style-type:none; margin:21px 6px 0px 6px; } nav ul li a { display:block; margin:31px 11px; text-decoration:none !important; text-align:center; width:91px; padding:7px 0; border-radius:5px; -o-transition:all 301ms ease-in-out; -ms-transition:all 301ms ease-in-out; -webkit-transition:all 301ms ease-in-out; -moz-transition:all 301ms ease-in-out; transition:all 301ms ease-in-out; background:Chartreuse; float:right; top:0; left:0; position:relative; } nav ul li a:hover { color:yellow; position:relative; right:0; bottom:0; top:-6px; left:-6px; box-shadow:2px 2px 0px blue, 3px 3px 0px pink, 4px 4px 0px OrangeRed, 5px 5px 0px grey, 6px 6px 0px BlueViolet; background:Chartreuse; } nav ul li a:active { color:yellow; top:6px; left:6px; box-shadow:0px 0px 6px white; } </style> </head> <body> <nav> <ul> <li> <a href="#">Lorem i</a> </li> <li> <a href="#">Lorem ip</a> </li> <li> <a href="#">Lore</a> </li> <li> <a href="#">Lorem</a> </li> </ul> </nav> </body> </html>