Tutorial CSS Episode 2
Akhirnya saya bisa posting lagi, setelah bergelut
dengan berbagai kesibukan osis, maklum lah, sebagai ketua osis saya yang paling
pusing dalam menghadapi acara kemarin. Okeh, sekarang kita akan meneruskan
pelajaran css yang kemarin. Sebelumnya kita sudah pernah mambuat sebuah tombol
yang sudah disuntik dengan css hingga hasilnya sebagai berikut :
Sekarang kita akan belajar fungsi yang namanya
“hover”. Ini akan berjalan jika kita mengarahkan mouse ke object yang kita
kasih fungsi “hover”.
Jika sebelumnya scriptnya jadi seperti ini :
<html>
<head><title> .:: BELAJAR CSS 1
::.</title>
</head>
<style type="text/css">
.tmbl{
background-color:gray;
color:red;
font-family:calibri,
Times New Roman;
width:120px;
height:40px;
}
</style>
<body>
<button
class="tmbl">TOMBOL</button>
</body>
</html>
Tambahkan script berikut pada script cssnya
menjadi seperti ini :
<style type="text/css">
.tmbl{
background-color:gray;
color:red;
font-family:calibri,
Times New Roman;
width:120px;
height:40px;
}
.tmbl:hover{
background-color:blue;
}
</style>
Hasilnya akan menjadi seperti ini :
Memang pada gambar diatas seperti tidak ada
bedanya, namun pada saat kita arah kursor pada tombol akan menjadi seperti ini
:
Untuk sekarang itu dulu yang kita pelajari, tunggu
aja episode pelajaran ini berikutnya, okeh..!!
Jika ada truble silahkan langsung berkomentar atau
mengirim e-mail kesini : ukiesigitaris@gmail.com
Ukie RPL
0 komentar: