Membuat Gambar Menjadi Tombol / Icon (HTML, CSS)

Ketika mendesain sebuah website terkadang kita menginginkan sebuah gambar untuk berlaku sebagai tombol (Icon).

Salah satu cara yang dapat dilakukan adalah dengan menggunakan CSS pada gambar.

Berikut langkah-langkahnya:

1. Siapkan gambar yang akan anda gunakan sebagai icon, misalkan copy.png

2. Masukan kode HTML untuk menampilkan gambar pada halaman web anda, kira-kira sebagai berikut:

Keterangan:

class : kelas dari pada gambar tersebut yang nantinya akan digunakan pada CSS. Sebenarnya dapat pula dilakukan dengan menggunakan id.

Berikut ilustrasi perbedaan class dan id:

SMAN I mempunyai sebuah ruang kelas 3B (class), dimana pada kelas tersebut terdapat banyak siswa (id) .

src : path atau letak daripada gambar tersebut.

title : tulisan yang akan muncul ketika mouse diarahkan ke atas gambar.

onclick : aktivitas atau fungsi yang akan dijalankan ketika gambar tersebut di klik.

Disini gambar tersebut sudah berfungsi sebagai tombol, yang ketika di klik akan menjalankan sesuatu aksi.

Namun apabila mouse diarahkan ke atas gambar tersebut, pointer mouse masih menunjukan panah biasa (pointer normal) dimana seharusnya apabila kita mengarahkan mouse ke atas tombol, pointer tersebut biasanya berupa tangan yg menunjuk.

3. Berikut kode CSS untuk mengubahnya:

Keterangan:

.icon : menandakan bahwa yang akan diubah adalah kelas yang bernama icon.

Selamat Mencoba. Cheers =)