Loading ...
Global Do...
News & Politics
9
0
Try Now
Log In
Pricing
2005-2007 Syarif Winata 1 Membuat Tombol 3D dengan CSS Author : Syarif Winata E-Mail : syarifwinata@softhome.net Website : http://syarwin.wordpress.com Published : April, 2007 Seluruh dokumen ini dapat digunakan untuk keperluan Pendidikan. Tidak diperkenankan digunakan untuk tujuan kepentingan yang bersifat profit. Penulisan ulang harus melalui ijin Penulis. Membuat tombol di Halaman sebuah website bisa menggunakan aplikasi grafis seperti halnya adobe photoshop. Namun dengan CSS pun ternyata bisa dengan bentuk 3D. Caranya mudah dan dalam hal ini saya menggunakan Macromedia Dreamweaver untuk membuatnya. 1. Buka aplikasi Macromedia Dreamweaver 2. Lakukan Klik Kanan kemudian Pilih CSS Styles New CSS Style 2005-2007 Syarif Winata 2 3. Isi form yang disediakan berikut option-option lain seperti pda gambar berikut ini 4. Isi form yang disediakan seperti Type, Background, untuk Block cari Display = Block. 5. Untuk bagian border contoh isiannya adalah sebagai berikut : 2005-2007 Syarif Winata 3 6. Jika sudah klik OK dan DONE. 7. Lakukan seperti Langkah No.2 yakni KLIK Kanan, kemudian pilih CSS Styles Edit Style Sheet 8. Pilih Class yang sudah kita buat dalam hal ini adalah .tombolku, kemudian klik Duplicate 9. Tambahkan Kata :hover , dan pilih Use CSS Selector dan Klik OK 10. Layar akan menampilkan seperti pada Langkah No.8, namun kali ini terdapat 2 Class, pilih class .tombolku:hover dan pilih edit 2005-2007 Syarif Winata 4 11. Secara otomatis akan ditampilkan seperti pada langkah No.4, yang perlu kita ubah adalah bagian Background saja. Jika sudah pilih OK dan lanjut dengan DONE. 12. Pada lembar kerja buat lah sebuah text yang akan kita beri LINK. 13. Block tulisan tersebut kemudian pada bagian Propertis berikan Link misalnya kita beri link ke http://www.google.com 14. Jika sudah, block tulisan tadi kemudian pada bagian bawah layer cari kode <a>, pilih kode tersebut dan lakukan klik Kanan. 15. Pilih Set Class tombolku 16. Simpan file anda, dan coba di browser hasilnya adalah : Nah .. silahkan dicoba
