Elegant Rollover Button dengan CSS & Fireworks

Posted by fanjava | Saturday, September 5, 2009 | | Labels: ,
Mungkin,Anda pernah mendengar istilah rollover button.Istilah tersebut tidak asing lagi di dunia web.Bagi Saya sendiri,Rollover Button lebih saya definisikan sebuah button atau tombol yang hidup.Maksudnya,button tersebut tidaklah kaku.Rollover Button sendiri lebih menonjolkan pada efek pada saat mouse over( mouse berada pada button tersebut ).

Rollover button sekarang sudah banyak kita temui pada web generasi kedua.Dimana Rollover Button dijadikan sebuah ciri khas tersendiri pada web tersebut.


Biasanya Rollover Button dapat digunakan menggunakan 3 cara:
  1. Menggunakan full desain,sehingga memudahkan kita untuk membuatnya.Sebenarnya menggunakan full design,juga melibatkan script di dalamnya.Hanya saja kita tidak begitu mengurusi script tersebut.Yang penting jadi dan bisa digunakan.. :D.
  2. Menggunakan full script,sebenarnya cara ini bagus,hanya saja..hasil dari rollover yang kita buat akan tampak kuno.Tidak adanya kesan  desain dalam button tersebut.
  3. Menggunakan desain dan script.Nah,cara inilah yang akan saya posting pada kesempatan kali ini.
    Cara ini merupakan cara yang cukup efisien.Karena,dengan desain yang menarik serta script yang tidak begitu rumit,akan memudahkan kita untuk memodifikasi button tersebut.
Nah,bagaimana sih membuat Rollover button ..?
Mungkin teman-teman sekalian penasaran,bagaimana membuat rollover button tersebut.Kesempatan kali ini,kita akan membuat rollover button menggunakan Macromedia Fireworks ( untuk desainnya ) dan Dreamweaver ( untuk scriptingnya ).




Pertama
Buka Aplikasi Fireworks Anda,kemudian buat dokumen dengan ukuran 150x50 px,set background colornya menjadi transparent.




Kedua
Buat sebuah kotak dengan Rectangle Tool.Buat tinggi kota itu,setengah dari tinggi dokumen dan lebarnya full dokumen.Lihat gambar di samping.



Ketiga
Beri warna gradient pada kotak yang Anda buat tadi.Gradientnya dari #0033FF ke #0066FF.Kemudian atur sedemikian rupa.



Keempat
Beri efek Bevel Emboss - Inner Bevel.Setting widthnya menjadi 1.










Kelima
Copy,kotak yang pertaman Anda buat tadi,dan letakkan di bawah tepat kotak sebelumnya.Ganti warna gradientnya dari #848400 ke #99CC00.Sehingga hasilnya akan tampak seperti gambar di samping.


Kemudian Save gambar yang telah Anda buat di atas,dengan nama button.Simpan dengan format JPG.
Sekarang kita akan mulai scriptingnya.Buka Aplikasi Dreamweaver Anda.Buat Dokumen HTML baru.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
a {
display: block;
background:url(button.jpg) top center;
width: 150px; /*Lebar Tombol*/
height: 25px; /*Tinggi Tombol*/
text-align: center; /*Supaya Teks Ditengah (vertical)*/
line-height: 25px; /*Supaya Teks Ditengah (Horizontal)*/
font-family: Geneva, Arial, Sans-Serif; /*(Jenis Huruf)*/
color: #fff; /*(Warna Hurus)*/
text-decoration: none; /*Jangan pergunakan garis bawah*/
-moz-border-radius:4px;
}


a:hover { /*Posisi kursor diatas tombol*/
background:url(button.jpg) bottom center;
}


a:active{
border:1px inset;
}
</style>
</head>


<body>
<a href="#">Tombol</a>
</body>
</html>

Intinya, kita menukar posisi image pada button.jpg, 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?

SELAMAT MENCOBA KAWAAN..!! :D

0 comments:

Post a Comment

Rss: Top