CSS: Bagaimana membuat rollover button dengan menggunakan 1 image

Rollover button dengan background image membuat tampilan menjadi lebih indah, tapi tahukah kamu, image yang digunakan bisa cukup satu saja ? lanjutin bacanya kalau kamu ingin tahu.

 

Rollover button atau button rollover, adalah salah satu cara membuat tampilan website kita lebih menarik. Prinsipnya rollover button ini memiliki 2 state yang berbeda, yaitu: state normal dan state hover (saat mouse melewati area button). Maka kita dapat menggunakan 2 gambar yang berbeda untuk mewakili 2 state tersebut.

Dengan sedikit pengetahuan CSS, kita hanya membutuhkan 1 file image /gambar saja untuk mewakili 2 state button tersebut.

Contoh, image yang akan kita gunakan sebagai rollover button adalah sebagai berikut:

Dan HTML sederhana saya untuk membuat rollover button adalah:

<div style="width: 200px; height: 50px;">
<a href="http://orangorangan.com/css-bagaimana-membuat-rollover-button-dengan-menggunakan-1-image">
<div class="satuimage">
</div>
</a>
</div>

Maka CSS untuk membuat rollover button ini bekerja sebagaimana mestinya adalah:

<style type="text/css">
.satuimage {
	background-image:url(one-image-button-rollover.gif);	
	width: 200px;
	height: 50px;
	border: 0px;
	}




.satuimage:hover {
	background-position: 0 -50px;
}




</style>

Cukup mudah kan? Jika kamu menganggap artikel ini menarik, silahkan share supaya yang lain juga bisa 🙂

*state pada button bisa ada 3: normal state, hover state, dan click state

** kode CSS harus diletakkan sebelum tag ‘</head>’

 

Hasil:

CSS: Membuat round corner dan shadow border dengan CSS

Kini membuat round corner dan shadow border (border bulat dan bayangan) sangat mudah dengan bantuan CSS3. Tidak hanya saya akan memberikan syntax CSS nya, tapi semoga penjelasan syntax nya juga dapat membantu teman-teman lebih memahami fungsi CSS dalam membuat round corner dan shadow border, sehingga design website akan terlihat lebih cantik dan dinamis.

Continue reading “CSS: Membuat round corner dan shadow border dengan CSS”

CSS dan HTML: perbedaan PADDING dan MARGIN

Buat yang masih suka bingung perbedaan antara PADDING dan MARGIN dalam pemakaiannya di CSS ataupun HTML, semoga penjelasan saya yang berikut ini membantu pemahaman antara hal tersebut. Hitung-hitung buat contekan saya juga kalo lupa hehe

Continue reading “CSS dan HTML: perbedaan PADDING dan MARGIN”

Bagaimana menggunakan custom font pada CSS dan WordPress

[flickr id=”5754202720″ thumbnail=”small” overlay=”true” size=”medium” group=”” align=”left”]
Untuk yang baru-baru menekuni kegiatan WordPress-ing atau membuat website dan menemukan bahwa membuat sebuah website itu menyenangkan dan mengasyikan, pasti sampai pada pertanyaan “Bagaimana menggunakan custom font pada website kita?”. Pasti seru nanti website kita jadinya!

Berikut saya share cara bagaimana menggunakan custom font pada CSS dan WordPress! Continue reading “Bagaimana menggunakan custom font pada CSS dan WordPress”

Hiding and Showing content with CSS and Javascript

For those who have lots of information in one page, but you dont want your user to scroll a….ll the way down (yeah it’s quite frustating to find a chunk of information di halaman yang panjang gila). Solusi ini bisa jadi alternatif gampang nan-efektif. Most effectifely on Continue reading “Hiding and Showing content with CSS and Javascript”