CSS Menu hover Effect. Today in this blog, we gonna learn about CSS Menu Hover Effect for Beginners.
CSS Menu Hover Effect
Hi Friends!
Today in this blog, we gonna learn about CSS Menu Hover Effect for Beginners. Menu Bar is an important part of navigation in websites. So, it must be an attractive thing for viewers. This is my first Menu Hover Effect. It's easy to learn.
This Menu Hover Effect is nice to see on websites. In the previous blog, we will learn about CSS Button Shutter Effect For Beginners if you're a beginner I will recommend learning that button effect first. If you learn that and this blog will help you to learn about Menu Hover Effect. In this blog, I will give my video tutorial and source codes to download. if you have any doubts ask me in the comment section.
HTML file
[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css underline hover effect</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div>
<span></span>
Home
</div>
<div>
<span></span>
Courses
</div>
<div>
<span></span>
About
</div>
<div>
<span></span>
Contact
</div>
</body>
</html>
]
You can copy this HTML file. and paste it into your HTML file. Now you will learn it clearly. and don't forget to save the file with an extension. HTML. This extension is more important for creating a website page.
CSS file
[
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: space-around;
align-items: center;
height: 100vh;
width: 100%;
background-color: #262626FF;
}
div{
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 100px;
width: 200px;
font-size: 50px;
font-weight: bold;
font-family: cursive;
border: 5px solid transparent;
letter-spacing: 2px;
color: grey;
cursor: pointer;
}
span{
display: block;
position: absolute;
height: 10px;
width: 10px;
bottom: 0;
left: 0;
}
div:hover{
color: white;
}
div:hover span{
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: linear;
background-color: lime;
width: 100%;
border-radius: 10px;
box-shadow: 1px 1px 40px lime;
}
]
Secondly, you can copy this CSS file. and paste it into your CSS file. and remember the file extension called. CSS. This will help you to design your webpage. If you want more clarity on this topic you can watch my video tutorial and If you have any doubts ask me in the comment section.
Video Tutorial
Watch this video fully and learn the Menu Hover Effect to create your own Menu Hover Effects. Repeating the code for your practice will help you to learn this Menu Hover Effect easily and This video is also helpful to learn faster. Glowing Menu Hover Effect is an important part of websites. I hope this tutorial will be helpful for learning button effects for beginners. I will give you Source Code and you can download it.
COMMENTS