Hey, developers welcome to Day 10 of our 90Days 90Projects challenge. And in Day 10 we are going to create a Navbar with a hover effect using HTML and CSS.
So to run the code you just need to copy the HTML and CSS code and run it into your code Editor.
Preview
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title> Navbar Hover Effect </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<h2>Geeks Help</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!-- Main Section for the content -->
<main>
<h2>Main Content Goes Here</h2>
</main>
<!-- Navbar Hover Effect created by raju_webdev -->
</body>
</html>
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
width: 100%;
height: 100vh;
background-color: rgb(254, 254, 254);
}
.navbar {
width: 100%;
padding: 3rem 0;
display: flex;
justify-content: space-around;
align-items: center;
height: 4rem;
background: rgb(26, 25, 25);
}
.navbar h2 {
color: white;
}
ul {
display: flex;
}
li {
list-style: none;
}
ul li a {
text-decoration: none;
padding: 5px 1rem;
margin: 0 10px;
color: rgb(232, 228, 102);
position: relative;
}
ul li a::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
border-top: 2px solid rgb(232, 228, 102);
border-left: 2px solid rgb(232, 228, 102);
transition: all .4s;
}
ul li a::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
right: 0;
box-sizing: border-box;
border-bottom: 2px solid rgb(232, 228, 102);
border-right: 2px solid rgb(232, 228, 102);
transition: all .4s;
}
ul li a:hover:after,
ul li a:hover::before {
content: '';
width: 10%;
height: 20%;
transform: rotate(360deg);
}
