Membuat Efek Mouseover pada Link
Ditulis oleh Hanif dalam DesignKali ini saya akan menuliskan bagaimana mempercantik tampilan website dengan menambahkan efek mouseover pada link, tetapi kali ini murni dari CSS/Stylesheet, karena ada beberapa efek mouseover yang menggunakan JavaScript ataupun Adobe Flash. Untuk membuatnya, codenya sebagai berikut :
<style type="text/css">
a {
color : #0000BB;
font-weight : normal;
text-decoration : none;
background-color : #FFFFFF;
}
a:hover {
color : #FF0000;
font-weight : normal;
text-decoration : underline overline;
background-color : #EEEEEE;
}
</style>
Sisipkan kode tersebut diantara tag <head>…</head>, untuk keterangannya adalah sebagai berikut :
- a : untuk mendefinisikan style tag <a>…</a> pada HTML
- a:hover : style ketika link mendapat efek mouseover
- color : adalah warna tulisan, anda dapat mengubahnya sesuai selera, misal #000 (hitam), #1e90ff (biru muda), yellow (kuning)…
- font-weight : opsi yang tersedia antara lain normal, bold, lighter, bolder atau anda dapat isi dengan angka misal 200, 600, untuk mengatur ketebalan tulisan.
- text-decoration : opsi yang dapat anda pilih adalah underline (garis bawah), overline (garis atas), line-through (coret), atau none (untuk normal)
- background-color : biasanya jarang dipakai untuk website dengan background gambar, karena akan membuat tampilan kurang indah, tapi anda bisa juga pakai sesuai kebutuhan design anda.
Kemudian di antara tag <body>…</body>, anda tuliskan suatu link misal :
// contoh link <a href=http://weblog.bedeng.com" title="Bukan Blog Biasa"> Kunjungi Bukan Blog Biasa... </a>
Selamat Mencoba… :D
• Label : Tips & Trik
Artikel ini ditulis pada tanggal 25 January 2008 pukul 01:30 dalam kategori Design. Anda dapat menyimak komentar yang dikirim ke artikel ini melalui RSS 2.0 feed. Anda juga dapat meninggalkan komentar, atau memberi trackback ke halaman ini.
