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


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 ?

About the Author

Write admin description here..

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

Related posts

0 comments:

Blogger templates. Proudly Powered by Blogger.
back to top