Membuat Style Link dengan CSS3

Saya coba memberikan sesuatu yang baru nieh atau kuno x ea hehehe okeh cekidot bro ...

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

Cocok untuk membuat efek pada sidebar ataupun footer blog kita. Ada tanggapan ? untuk demonyan silahkan di buat sendiri ea sob ...

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Membuat Style Link dengan CSS3. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="https://bungkaryo.blogspot.com/2012/04/membuat-style-link-dengan-css3.html" target="_blank">Membuat Style Link dengan CSS3</a>

:: Get this widget ! ::

- Reviewer: Unknown - ItemReviewed: Membuat Style Link dengan CSS3