Saat ini mungkin Anda sering melihat tombol yang menyerupai bentuk 3D. Kebanyakan tombol2 tersebut dibangun dengan basis JavaScript. Masalah utama dalam penggunaan script2 ini adalah ada kemungkinan besar script2 ini diblok oleh browser. Dan juga untuk utilitas2 web seperti
Ad Blockers (pembloking iklan), hal ini merupakan suatu kekurangan yang serius. Nah, dalam situasi inilah CSS bisa menyelamatkan fungsi ini.
Meskipun kita tidak bisa membuat tombol 3D yang profesional sebagaimana apabila dibuat dengan menggunakan JavaScript, kita masih dapat membuat tombol 3D yang cukup dasar dan mudah.
Kode atau perintah CSS yang utama adalah:
a.pushbut {
color:#008;
display:block;
border:1px solid;
border-color:#aaa #000 #000 #aaa;
text-decoration:none;
width:8em; text-align:center;
height:2em; line-height:2em;
background:#00ff77; font-weight:bold
}
dan
a.pushbut:hover
{
color:#00f;
background:#00ff99;
position:relative;
top:1px;
left:1px;
border-color:#000 #aaa #aaa #000
}
Kode2 tersebut di atas jangan lupa harus diletakkan di dalam tag
<style>.
Dan tentu saja Anda bisa mengganti nilai2 settingan dalam CSS tersebut, misal: warna tulisan, background, jarak, ukuran, dll.
Sekarang, untuk membuat tombolnya, kita harus menentukan obyek class sebagai penekanan tombol dalam tag
<body>, itu saja, misal:
<p><a href="http://if.web.id/" onclick="return false" onkeypress="return false" title="Forum Informatika" class="pushbut">Go ForumIF!</a></p>
Contoh:
Ketika dilalui mouse (
onMouseOver)
NOTES:Kalau ingin supaya ketika tombol diklik atau di-ENTER bisa menuju link yang ditulis, untuk event
onkeypress dan
onclick silakan isi atau ganti dengan
return true
