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 =)

SOMETIMES

Sometimes...
Things are not working as we want...
We're bound with our mistakes..
We thought no one care about us..

Desperate..
and questioning ourselves: WHY ME??
but we couldn't get the answer..
We're deepen by the sadness..
Brought to our weakest state..

We did some foolish action in which even an idiot would not ever think about it..
Yes, we're worse than an Idiot at that time..

Open ur eyes..
and wake up my fellow friends..
We're all ever face problems..
and you are never alone..
you have friends..
you have best friends...
you have your families..
and you have the almighty God..

So...

Wipe away ur tears..
and stand firmly..
Start walking towards ur destiny..
encourage and help one another..
Coz in God's way we can...

YEES, WE CAN!! :p