Kita buat Mark-up HTML terlebih dahulu :
<ul class="shift">
<li><a href="#">Sorot ini</a></li>
<li><a href="#">Sorot tautan ini</a></li>
</ul>
Sesudah itu mari kita buat CSS-nya :
.shift {
list-style: none;
display: inline-block;
}
.shift li {
background: orangered;
width: 0%;
display: block;
-webkit-transition: all 0.125s ease-in-out;
-moz-transition: all 0.125s ease-in-out;
transition: all 0.125s ease-in-out;
}
.shift li:hover {
width: 100%;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.shift li a {
text-transform: uppercase;
display: block;
color: #000;
font-size: 1em;
margin: 0.5em;
padding: 0.5em;
text-decoration: none;
white-space: nowrap;
}
Berikut hasilnya yang sudah jadi, coba sorot tulisan 'Sorot ini' lalu lihat efeknya :
Keren kan, cocok untuk membuat efek pada sidebar ataupun footer blog kita. Ada tanggapan ?