Home » , » Cara Buat Efek Pada Link

Cara Buat Efek Pada Link

Unknown | 14.32 | 2komentar
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 :


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.



Share this article :

2 komentar:

  1. keren sobat....gimana cara buat menu yang nurut seperti diatas sob??? hehe

    http://pondokmerana.blogspot.com

    BalasHapus
    Balasan
    1. ok gan lain kali akan saya share,, soalnya lumayan banyak karena menggunakan css saja.

      Hapus

Tinggalkan Jejak Dengan Berkomentar ya! Terimakasih

Daftar Kategori


close
cbox
 
Alamat: Talun | Ngebel | Ponorogo
Copyright © 2011. PUISI DAN PENDIDIKAN - All Rights Reserved
Template Modify by Cah Ngebel
Proudly powered by Blogger