Cara membuat tautan dengan gambar hover dalam CSS biasa

Artikel ditulis oleh:
  • Desain Website
  • Diperbarui: Feb 27, 2020

* Perbarui catatan: Posting ini pertama kali diterbitkan pada Oktober 2009. Beberapa teknik yang saya sebutkan mungkin sudah ketinggalan zaman. Silakan merujuk panduan ini untuk teknik pembuatan situs web terbaru.

Apa yang melayang-layang? Definisi dikutip dari UWStout.edu:

'Arahkan' adalah efek yang terjadi ketika Anda meletakkan kursor di atas tautan apa pun. Tautan dapat dikodekan untuk merespons hover dengan mengubah warna, menampilkan grafik baru, atau bahkan memutar file suara.

Efek melayang-layang meningkatkan kegunaan web dan membantu pemilik web untuk mengarahkan lalu lintas web mereka. Ketika Anda ingin pengguna web Anda memberi perhatian ekstra pada tautan khusus, cara yang baik untuk melakukannya adalah membuat tautan dengan efek hover yang menarik. Efek hover sederhana seperti ini (garis bawah sederhana dan perubahan warna teks) menunjukkan teks tersebut 'dapat diklik' dan meningkatkan interaksi web. Namun, mengubah warna dan gaya teks (garis bawah / garis besar / tebal) sangat mendasar dan ada banyak lagi yang bisa dilakukan dengan mengarahkan kursor.

Pada artikel ini, saya akan menunjukkan bagaimana Anda dapat membuat tautan yang terlihat bagus dengan efek hover.

Contoh 1: Tautan dengan tombol hover

Pertama, lihat contoh kerja (letakkan mouse di atas tautan untuk melihat cara kerjanya - perubahan ikon di samping).

Contoh 1 - Tautan dengan gambar tombol hover

Ini adalah versi lengkap dari apa yang akan dibangun dalam contoh ini.

Bagaimana kami membuatnya dalam CSS biasa?

Gambar Tombol

Langkah 1, seperti yang Anda lihat, kita memerlukan ikon panah dalam dua versi yang berbeda. Dalam contoh kami, saya menggunakan warna merah (#CC3300) sebagai tombol tautan default; dan abu-abu (#333333) untuk efek mengambang. Tombol semacam itu dapat dengan mudah dibuat menggunakan perangkat lunak pengeditan gambar.

Kami sekarang memiliki tombol warna merah (misalnya, b1.png) dan warna rey (tombol katakan, b2.png). Gabungkan dua file ini menjadi satu file gambar dengan b1.png di atas b2.png. Ini akan menjadi gambar akhir kami untuk tautan. Beri nama (katakanlah, x.png) dan unggah lokasi yang diinginkan (untuk kasus saya, saya letakkan di folder template WP).

Untuk referensi Anda:

b1.png , b2.png , dan x.png

Kode CSS

Selanjutnya, pada kode CSS. Pada dasarnya apa yang ingin kita capai adalah dengan mengindentifikasikan teks tautan sedikit ke kanan untuk memberi ruang bagi tombol; dan dalam waktu yang sama, tampilkan gambar yang berbeda ketika tautan berada dalam keadaan mengambang. Ini adalah hal-hal yang sangat mendasar kecuali bahwa kita memerlukan sedikit sentuhan pada posisi latar belakang. Triknya adalah menampilkan bagian atas gambar (tombol merah) untuk tautan asli; dan ketika melayang, lepaskan gambar latar belakang dengan margin -11px (mungkin berbeda pada situs web Anda) untuk menampilkan tombol abu-abu.

.xa {color: #cc3300; padding-left: 14px; font-weight: bold; background-image: url (gambar / x.png); posisi latar belakang: 0 2px; background-repeat: no-repeat; }
.xa: hover {color: #333333; padding-left: 14px; font-weight: bold; background-image: url (gambar / x.png); posisi latar belakang: 0 -11px; background-repeat: no-repeat; }

Implementasi

Untuk memamerkan efek hover ini, cukup masukkan kelas x ke area yang ditentukan. Berikut ini contoh bagaimana Anda bisa melakukannya.

<p class = 'x'> <a href="http://www.webhostingsecretrevealed.com"> Beranda </a> </ p>

Contoh 2: Menautkan di latar belakang kursor

Dengan konsep yang sama, ada banyak cara Anda dapat membuat tautan Anda terlihat keren. Inilah contoh lain tentang apa yang dapat kita lakukan dengan efek hover dengan metode yang sedikit berbeda. Sekali lagi, lihat versi yang sudah jadi.

Contoh 2 - Tautan di latar lirikan kursor

Dalam contoh ini, apa yang akan saya lakukan adalah membuat hyperlink yang disukai tombol di mana latar belakang akan berubah ketika pengguna menempatkan mouse mereka di atasnya.

Bagaimana kami membuatnya dalam CSS biasa?

Gambar latar belakang

Pertama, buat dua gambar persegi panjang bulat. Untuk tujuan demonstrasi, kami tidak akan menggabungkan kedua gambar ini dalam contoh ini. Kami akan menamai kotak merah (#CC3300) sebagai b1.png; dan persegi panjang maroon (#9F2800) sebagai b2.png.

Kode CSS

Selanjutnya, berikut adalah kode untuk style sheet Anda (kami memberi nama kelas 'y' dalam contoh kedua ini).

ay {width: 280px; tinggi: 42px; warna: #000000; padding: 10px; teks-dekorasi: tidak ada; display: blok; font-weight: bold; background-image: url (images / b1.png); background-repeat: no-repeat; }
ay: hover {width: 280px; tinggi: 42px; warna: #FFFFFF; padding: 10px; font-weight: bold; teks-dekorasi: tidak ada; display: blok; background-image: url (images / b2.png); background-repeat: no-repeat; }

Implementasi

Untuk menampilkan tautan, sederhanakan sisipkan kelas (y) ke dalam tag <a href> di kode sumber Anda. Contoh:

<a href="http://www.webhostingsecretrevealed.com" class="y"> Beranda </a>

Membungkus

Saya harap artikel ini membawakan Anda informasi berharga dan menginspirasi beberapa dari Anda untuk menggunakan CSS dengan cara yang kreatif. Jika ada poin lain yang menurut Anda harus saya tambahkan dalam panduan ini, jangan ragu untuk meninggalkan ide-ide Anda di bagian komentar.

Tentang Jerry Low

Pendiri WebHostingSecretRevealed.net (WHSR) - ulasan hosting yang dipercaya dan digunakan oleh pengguna 100,000. Lebih dari 15 tahun pengalaman dalam hosting web, pemasaran afiliasi, dan SEO. Kontributor ke ProBlogger.net, Business.com, SocialMediaToday.com, dan banyak lagi.