Pernah melihat link yang berubah warna ketika kursor berada di atasnya ?Jika belum silahkan coba dilihat di situs twitter sebagai contoh dan coba geser kursor ke Home (Beranda) maka akan terlihat sebelum kursor berada di posisi link, link masih berwarna abu-abu gelap, akan tetapi jika kursor diletakkan pada link tersebut, maka warnanya berubah jadi biru.Itu adalah efek dari CSS.Nah cara pembuatannya adalah sebagai berikut.Selamat membaca !
Pertama-tama siapkan file HTML dan CSS anda dan buatlah beberapa link.Jika belum mengetahui cara pembuatannya silahkan buka link ini (materi tentang HTML dan CSS) dan pelajari dari awal.Setelah semuanya siap, anda hanya menambahkan script berikut di file CSS anda :
Jika anda menggunakan selektor untuk link di CSS anda maka gunakan script ini :
namaselektor:hover {
color: (warna pilihan anda);
}
Jika anda menggunakan class untuk link di CSS anda maka gunakan script ini :
.namaclass:hover {
color: (warna pilihan anda);
}
Jika anda menggunakan ID untuk link di CSS anda maka gunakan script ini :
#namaid:hover {
color: (warna pilihan anda);
}
Anda juga bisa menggunakan property box-shadow untuk membuat latar belakang pada link anda menjadi berubah warna jika kursor diarahkan kesana.Cara penggunaan box-shadow adalah sebagai berikut :
Jika anda menggunakan selektor untuk link di CSS anda maka gunakan script ini :
namaselektor:hover {
color: (warna pilihan anda);
box-shadow: 3px 3px 3px;
}
Jika anda menggunakan class untuk link di CSS anda maka gunakan script ini :
.namaclass:hover {
color: (warna pilihan anda);
box-shadow: 3px 3px 3px;
}
Jika anda menggunakan ID untuk link di CSS anda maka gunakan script ini :
#namaid:hover {
color: (warna pilihan anda);
box-shadow: 3px 3px 3px;
}
Untuk lebih jelasnya silahkan dicoba sendiri atau anda dapat melihat di CONTOHLINK ini sebagai contoh agar anda lebih mengerti.Setelah itu silahkan ubah nilai dari property color dan box-shadow sesuai dengan keinginan anda .Pada halaman tersebut coba arahkan kursor ke arah pilihan Anime ,Game atau Basketball.dan setelah pindah ke halaman selanjutnya, coba arahkan kursor ke salah satu pilihan jawaban, hasilnya akan terlihat.
Sekian pembahasan mengenai cara membuat link berubah warna.Semoga bermanfaat ! Jika ada yang kurang jelas silahkan ditanyakan di kolom komentar.Terima kasih !
Comments
Post a Comment