• Home
• About
• Contact
• RSS

CSS : Simple Button Dengan CSS Image Sprite

Selama aku belajar di UTeM, aku tertarik dengan hasil kerja Razif ‘Ng’ Mustapha (Popshovans), inspired, bila sama-sama masuk DANAU, weng die tu aku tengok macam lain macam dah, sampai la hari ini. Aku sukakan website dia, kalo dia buat hitam putih pun aku suka jugak sebab penulisan dia yang kreative-pop. Gambar-gambar photography undeath dia pun boleh tahan.

Bagi yang belum pernah melawat website dia, silalah lawat, if orang tanyakan aku apa patut rupa blog masa kini, aku cakap contohi blog Abang Ng. Hari ini aku nak bantu beliau sikit tentang macam mana nak buat simple button dengan menggunakan CSS.

Casenya macam ni la, korang nak buat link dengan menggunakan imej as background. Tapi perlu ingat, link ada 5 jenis condition (if ada lebih tolong tambah, aku suku pro):

1. a @ a:link
2. a:visited
3. a:hover
4. a:focus
5. a:active

So normally aku akan stylekan link secara default macam ni

a, a:visited {
	color: #0066cc;
	text-decoration: none;
	}

a:hover, a:focus{
	text-decoration: underline;
	}

perlunya untuk kita paham dulu stuktur link tu dulu sebelum kita pergi dengan lebih jauh. Untuk bracket pertama
a, a:visited adalah styling untuk condition awal link tersebut, a:hover dan a:focus adalah condition yang berbeza, tapi  aku kelaskan dalam satu bracket bersama sebab aku nak link aku akan berada dalam style yang sama bila aku mouse-over dan juga cursor-focus(hold-click) link tersebut. Dan kalau korang perasan aku abaikan a:active. Sebab aku malas. korang boleh baca kat w3schools untuk maklumat lanjut tentang CSS Pseudo-classes.

Pertamanya kita kena ada gambar button dahulu, aku dah buat kan untuk korang satu button sebagai contoh, dan aku pun sediakan PSD files untuk rujukan macam mana aku design button macam ni.

Untuk tutorial kali ini, aku sediakan 1 button yang bersaiz 220×100px. Aku buat dengan ukuran genap-genap untuk memudahkan pemahaman korang nanti. Ok, straightforward kita code macam ni.

a.example, a.example:visited {
		float: left;
		width: 220px;
		height: 50px
		display: block;
		text-indent: -999em;
		background: url(sample_btn.gif) 0 0 no-repeat;

		margin: 0;
		padding: 0;
		}
a.example:hover, a.example:focus{
	background: url(sample_btn.gif) 0 -50px no-repeat;
	}

Dari CSS yang aku sedialan di atas, aku buatkan 1 link yang bersaiz 220px*50px. Kenapa height 50px je sedangkan size background original button 100px? Sebab aku nak paparkan separuh jek dari image button yang aku sediakan tu. Separuh lagi aku nak display dalam state:hover.bagi yang follow tutorial aku yang sebelum ni CSS:Styling Your List, sikit sebanyak akan paham dengan background: url(sample_btn.gif) 0 0 no-repeat; dan url(sample_btn.gif) 0 -50px no-repeat; okay, kalau korang tengok ada Apx Bpx no-repeat tu, Apx Bpx tu sebenarnya adalah position background, yang mana ‘Apx tu distance background dari kiri dan ‘Bpx‘ tu distance background dari top. Korang boleh cuba adjust nanti dalam source yang aku sediakan.

Kenapa aku tak pisahkan button tersebut kepada 220px*50px, dua bahagian? Letak yang bahagian biru dalam state:hover seperti yang biasa kita buat? Okay, dulu aku pun pernah buat macam tu, pisahkan button kepada 2 bahagian, tapi dari teori aku, bila kita seperate 2 file, browser just load file button silver tu jek, bila kita hover button tu baru terhegeh2 nak load button biru. So pada UX (User Experience) aku, ianya macam merencatkan. Bila kita sekalikan, pada first-load page kita, browser dah load kedua-duanya, cuma display yang atas dulu, bila hover dia just ubah position jek untuk display yang bawah, tak perlu untuk load lagi.

Aku juga pernah terbaca artikel (malas dah nak cari, tanya abang Google) background adalah property yang last skali browser akan load, so pandai-pandai la kita optima kan size file button kita untuk percepatkan process load.

Enjoy! Live Demo | Download Source File With PSD (38k)

p.s: Ajib, ko buat sekarang!