Membuat Style pada Link dengan CSS3

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 :

<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 :

• Sorot ini
• Sorot tautan ini

Keren kan, cocok untuk membuat efek pada sidebar ataupun footer blog kita. Ada tanggapan ?