Interaktifitas dalam sebuah situs web penting artinya bagi pengunjung situs. Dengan interaktifitas, Anda dapat lebih memberikan penekanan terhadap sebuah elemen, seperti link atau tombol contohnya. Kali ini kita akan membuat sebuah link yang disulap menjadi sebuah tombol rollover. Rollover adalah istilah bila kursor berada disebuah link maka link tersebut akan bereaksi. Kita akan membuat tombol rollover tersebut hanya dengan CSS, ya sesederhana itu…
Anda dapat melihatnya pada halaman Contoh.
Yang perlu kita siapkan adalah sebuah image yang bisa dibuat dengan menggunakan Photoshop seperti dibawah ini:
Gambar diatas adalah gambar yang akan kita pergunakan dimana gambar diatas terbagi menjadi 2 bagian, yaitu bagian atas untuk tombol yang tidak ditempati kursor (state), dan bagian kedua adalah bagian yang ditempati kursor (Over/Rollover), pada contoh ini saya berinama file tersebut dengan nama tombol.gif.
Perhatikan gambar diatas, dan perhatikan baik-baik pada ukuran yang saya berikan pada bagian atas. nah ukuran itu yang nanti akan kita pergunakan sebagai ukuran dari tombol. Yang kita perlukan sekarang adalah membuat kode html untuk tombol diatas:
<a href="#">Tombol</a>Nah, semudah itu. Sekarang kita buat CSS nya:
a {display: block;background: url(tombol.gif) top center;width: 124px /*Lebar Tombol*/height: 40px /*Tinggi Tombol*/text-align: center; /*Supaya Teks Ditengah (vertical)*/line-height: 40px; /*Supaya Teks Ditengah (Horizontal)*/font-family: Geneva, Arial, Sans-Serif; /*(Jenis Huruf)*/color: #fff; /*(Warna Hurus)*/text-decoration: none; /*Jangan pergunakan garis bawah*/}
a:hover { /*Posisi kursor diatas tombol*/background: url(tombol.gif) bottom center;}Intinya, kita menukar posisi image pada tombol.gif, bila tidak aktif maka ia menggunakan background bagian atas, ketika aktif maka akan digunakan background bagian bawah. Kenapa kita harus menggunakan display:block? Dikarenakan <a> merupakan inline tag, maka ia harus menggunakan display:block agar menjadi block tag dan dapat merespon link area. Mudah bukan?
Sumber: http://pupungbp.erastica.com
