Hello Viewers, today in this tutorial, you’ll learn How To Make Creative Menu Hover Effects using HTML and CSS.
This Post is about making a Creative Menu Hover Effects using HTML and CSS.
To create this project (Creative Menu Hover Effects using HTML and CSS.). First, you need to create two Files one HTML File and another one is CSS File.
First, create an HTML file with the name of index.html and paste the given code in your HTML file.<html lang="en">
<!-- Created by Amit Tutorial - www.amittutorial.com -->
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Creative Menu hover Effect</title>
<!-- External CSS -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<ul>
<li><a href="#" class="list-items">Home</a></li>
<li><a href="#" class="list-items">About</a></li>
<li><a href="#" class="list-items">Services</a></li>
<li><a href="#" class="list-items">Team</a></li>
<li><a href="#" class="list-items">Contact</a></li>
</ul>
</div>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given code in your CSS file.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
}
ul{
margin: 0;
padding: 0;
display: flex;
}
li{
list-style: none;
}
.list-items{
position: relative;
display: block;
padding: 15px 30px;
text-decoration: none;
text-transform: uppercase;
color: #000;
font-size: 22px;
font-weight: bold;
transition: 1s;
}
.list-items:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transform: scaleY(2);
transition: 1s;
border-top: 2px solid crimson;
border-bottom: 2px solid crimson;
}
.list-items:hover:before{
transform: scaleY(1.2);
opacity: 1;
}
.list-items:after{
content: "";
background: crimson;
position: absolute;
top: 2;
left: 0;
width: 100%;
height: 100%;
transition: 1s;
transform: scale(0);
z-index: -1;
}
.list-items:hover:after{
transform: scale(1);
}
.list-items:hover{
color: #fff;
}
That’s all in this post, you’ve successfully created Creative Menu Hover Effects using HTML and CSS.
If your code does not work or you’ve faced any problem then comment down your problem. If you’re feeling difficult to understand what I am saying in this post.
You can watch a full video tutorial on this project(Creative Menu Hover Effects Using HTML & CSS).
Download Source Code: