Cara Buat Efek Pada Link

Ok kali ini akan mencoba membahas style pada link dengan sesuatu yang berbeda sob, sedikit memodifikasi pada CSS3 dan kita akan mendapatkan hasil yang lumayan bagus. Sebenarnya masih banyak lagi jenis pengaturan CSS ini, namun tidak ada salahnya kita mencoba hal yang baru. Ok langsung aja kita praktekkan.

Kita buat Mark-up HTML terlebih dahulu :

<ul class="shift">
<li><a href="#">Arahkan Mouse Kesini</a></li>
<li><a href="#">Arahkan Mouse </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 “Arahkan Mouse Kesini” lalu lihat efeknya :

• Arahkan Mouse Kesini
• Arahkan Mouse

Silahkan buat kreasi yang lain yang akan mengembangkan CSS ini.
Kerenkan, cocok untuk membuat efek pada sidebar ataupun footer blog kita. siapa yang mau coba ?


Tags : Trimudareog, Nurrohman, Ngebel, Cah Gunung, Artikel, Coretanku.