Sepertinya sudah lama saya tidak membuat postingan disini, kali ini saya memberikan trick menggunakan CSS3 untuk link saat di sorot (hover efek). Sebenarnya sudah ada beberapa yang sempat saya bagikan di blog saya dengan judul Macam Efek Link Dengan CSS3, dan kali ini saya coba memberikan sesuatu yang baru.
Kita buat Mark-up HTML terlebih dahulu :
Sesudah itu mari kita buat CSS-nya :
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 ?
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 ?
semuanya terserah anda.. 
