CSS3 Link Nudging

CSS-TRICKS.com

CSS

ul.nudging {
  margin:10px 10px;
  padding:0px 0px;
  font:normal 16px Sans-Serif;
}

ul.nudging li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}

ul.nudging li a {
  text-decoration:none;
  display:block;
  overflow:hidden;
  padding:5px 10px;
  color:white;
  background-image:-webkit-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
  background-image:-moz-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
  background-image:-ms-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
  background-image:-o-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
  background-image:linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4));
  -webkit-background-size:200% 100%;
  -moz-background-size:200% 100%;
  background-size:200% 100%;
  -webkit-transition:all 0.26s ease-out;
  -moz-transition:all 0.26s ease-out;
  -ms-transition:all 0.26s ease-out;
  -o-transition:all 0.26s ease-out;
  transition:all 0.26s ease-out;
}

.nudging li a:hover {
  background-position:100% 100%;
  padding-left:15px;
}

HTML

<ul class="nudging">
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Ipsum</a></li>
    <li><a href="#">Dolor</a></li>
    <li><a href="#">Sit Amet-Amet</a></li>
    <li><a href="#">Jabang Bayi</a></li>
    <li><a href="#">Oek-Oek</a></li>
</ul>

Lihat Demo