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?
http://pupungbp.erastica.com
9 Responses to Tombol Rollover dengan CSS
Castor June 4, 2008
Kasih yang lebih menantang donk!
Reza Akiel June 29, 2008
Hehe..makasih tuwh,, bberguna banget…
Reza Akiel June 29, 2008
hehe makasii…masukannya
blacketdet September 11, 2008
Wah thangs banget bro kebetulan lagi belajar CSS
Ary October 22, 2008
Thanks for info
cuy November 20, 2008
nti klo dah jd taro dmn bos..cssnya…trus bsa ga banner worpress or joomla di pakein animasi flash…thx jo
Deon@MakeMac November 23, 2008
bisa juga menggunakan background posisition :D
ghielz January 2, 2009
bisa buat link download gak tombolnya?