Membuat Efek Border Pada Hover Link

Written By batikbumi on 10 Nov 2012 | 04.21

Berikut ini adalah cara membuat link memiliki efek border saat mouse berada pada link tersebut. Jadi, maksudnya, ketika mouse diarahkan ke link, maka link tersebut akan memiliki border yang mengelilinginya. Efek tersebut akan saya buat dengan menggunakan CSS

Pertama, saya siapkan gambar dalam folder borderHover (nama terserah anda), gambar tersebut adalah anjing.jpg


anjing.jpg

Kemudian saya buat file html yang saya beri nama link_border.html yang saya taruh pada folder yang sama dengan folder gambar anjing.jpg. Kode html nya sebagai berikut:

<html>
<head>
<title>Link Border Hover</title>
<link rel="stylesheet" href="efek_border.css" type="text/css">
</head>
<body>
<a class="efekborder" href="http://www.bum1.info" target="_blank">
<img src="anjing.jpg">
</a>
</body>
</html>

Kemudian buat file .CSS yang juga ditaruh dalam folder yang sama. Saya akan memberi nama file .CSS nya efek_border.css, kodenya sebagai berikut:

.efekborder{
border: 6px solid #ccc;
}
.efekborder:hover img{
border: 6px solid blue;
}

hasilnya akan seperti di bawah ini :

Gambar sebelum Hover dan gambar setelah di hover.

3 komentar:

Anonim mengatakan...: submit artikel kamu di social bookmark http://mencoba.info/

thanks; 13 November 2012 pukul 21.57
Anonim mengatakan...: Hmmm.... infonya mantap banget dan wajib diuji coba di blog pribadi saya nih :)
Thanks ya mastah; 2 Desember 2012 pukul 19.29
Dody Saduyasa mengatakan...: Informasi yang sangat bermanfaat dan menarik. Untung banget ketemu di google blog ini. Salam kenal dan kunjungan baliknya ya om ke blog saya.
Trims; 25 September 2013 pukul 18.15

Tutorial Website