Membuat Style pada Link dengan CSS3

Posted by rike on 0

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;
}