Cool CSS3 Hover Effect

7/10/2013

Ever wondered how css-tricks.com does that cool hover effect on it's links in the footer? This is how...

CSS

ul {
background:black;
padding:30px;
}
li {
position:relative;
}
ul a {
color:white;
text-decoration:none;
}
ul a > span {
position:absolute;
pointer-events:none;
bottom:0;
width:100%;
height:1px;
margin-bottom:3px;
left:0;
background:-webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #ffffff), color-stop(5%, #ffffff), color-stop(5%, rgba(255, 255, 255, 0.25)), color-stop(100%, rgba(255, 255, 255, 0)));
background:-webkit-linear-gradient(left, #ffffff, #ffffff 5%, rgba(255, 255, 255, 0.25) 5%, rgba(255, 255, 255, 0));
background:-moz-linear-gradient(left, #ffffff, #ffffff 5%, rgba(255, 255, 255, 0.25) 5%, rgba(255, 255, 255, 0));
background:-o-linear-gradient(left, #ffffff, #ffffff 5%, rgba(255, 255, 255, 0.25) 5%, rgba(255, 255, 255, 0));
background:linear-gradient(left, #ffffff, #ffffff 5%, rgba(255, 255, 255, 0.25) 5%, rgba(255, 255, 255, 0));
background-position:100% 0;
-webkit-background-size:200% 100%;
-moz-background-size:200% 100%;
-o-background-size:200% 100%;
background-size:200% 100%;
-webkit-transition:background 0s linear;
-moz-transition:background 0s linear;
-o-transition:background 0s linear;
transition:background 0s linear;
}
ul a:hover, ul a:focus {
color:#e18728;
}
ul a:hover > span, ul a:focus > span {
background-position:-100% 0;
-webkit-transition:background 0.4s;
-moz-transition:background 0.4s;
-o-transition:background 0.4s;
transition:background 0.4s;
}

HTML

<ul>
   <li><a href="#">Link one<span></span></a></li>
   <li><a href="#">Link two<span></span></a></li>
   <li><a href="#">Link three<span></span></a></li>
</ul>

ADVERTISE HERE