HTML CSS examples for CSS Widget:Hover
Hover to slide background
<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>