Cara Membuat Efek Hover Pada Menu Menggunakan CSS3

Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Pada tutorial kali ini saya akan mencoba membagi Cara Membuat Efek Hover Pada Menu Menggunakan CSS3.

Sering kali kita ingin memberi efek-efek pada website kita agar terlihat lebih bagus. Seperti membuat efek hover.

Nah, sekarang saya akan mencoba membuat efek hover pada menu menggunakan css3.

Sekarang saya akan memberikan trick Cara Membuat Efek Hover Pada Menu Menggunakan CSS3. berikut langkah-langkahnya:

– Pertama teman-teman buat struktur dasar HTML-nya dulu:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<nav id="navigasi">
	  <a class="link" href="#">Home</a>
	  <a class="link" href="#">About</a>
	  <a class="link" href="#">Contact</a>
	  <a class="link" href="#">Shop</a>
	</nav>
</body>
</html>

Jangan lupa save dengan nama index.html

– Kedua teman-teman ketikan kode CSS3 di bawah ini:

@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
nav {
  margin-top: 40px;
  padding: 24px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}
#navigasi {
  background: #3fa46a;
}

.link {
  transition: 0.3s ease;
  background: #3fa46a;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  border-top: 4px solid #3fa46a;
  border-bottom: 4px solid #3fa46a;
  padding: 20px 0;
  margin: 0 20px;
}
.link:hover {
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0; 
}

– Hasilnya akan menjadi seperti ini.

– Pada saat di hover maka efek yang kita berikan akan memberikan border atas dan bawah pada menu yang kita tunjuk oleh kursor seperti gambar di bawah ini :

Bagaimana teman-teman mudahkan Cara Membuat Efek Hover Pada Menu Menggunakan CSS3. Â

Sekian tutorial saya untuk kali ini. Sehat selalu ya teman-teman, selamat mencoba.

Cara Membuat Efek Hover Pada Menu Menggunakan CSS3

Kategori