TOMBOL NAVIGASI CANTIK DENGAN CSS

Ketika kita sedang browsing di sebuah halaman website, kadang kita menemukan tombol anvigasi yang kelap-kelip atau berubah warna ketika kita arahkan kursor ke tombol tersebut. Oleh karena itu penulis penasaran bagaimana bisa membuat tombol unik seperti itu. Ternyata untuk membuatnya dapat digunakan beberapa cara seperti menggunakan macromedia flash atau yang disebut dengan flash button dan ada juga yang hanya menggunakan elemen-elemen yang ada di CSS. Saya akan mencoba membahas yang menggunakan elemen-elemen CSS tersebut. Untuk lebih jelasnya berikut ini contoh tampilan tombol unik tersebut.



Berikut ini kode CSS yang digunakan untuk membentuk tampilan button seperti gambar diatas.



Kode yang membuat tombol tersebut berubah warna ketika kursor diarahkan tepat pada tombol tersebut adalah pada elemen “tag #menu a:hover”. Jadi, ketika kursor diarahkan pada tombol maka tombol tersebut akan berubah warna menjadi kuning (#fffcd04).
Sedangkan bagaimana tombol berubaha warna menjadi kuning setelah tombol ditekan dan halaman yang dituju aktif. Misalkan halaman yang dituju adalah halaman Home atau document index.html. Hal pertama yang kita fokuskan adalah pada document HTML-nya. Kalau kita perhatikan pada gambar dibawah kode tombol “Home ” memiliki nama tag class “active”. Tag “active” tersebut berguna untuk kode CSS.



Jadi, ketika tombol “Home” ditekan maka tombol tersebut akan berubah warna menjadi kuning. Begitu juga ketika kursor diarahkan menjauh, tombol tetap berwarna kuning. Keadaan demikian disebut dengan “active” sesuai tag class-nya.

Semoga bermanfaat...