CSS Creative Menu Hover.Today in this blog, we gonna learn about CSS Creative Menu Hover Effect.
CSS Creative Menu Hover Effect
Hi Friends!
Today in this blog, we gonna learn about CSS Creative Menu Hover Effect. Menu Bar is a main part of the website. I already uploaded some Menu Hover effects if you're a beginner let's go and learn it.
This Creative Menu Hover Effect is nice to see on websites. In the previous blog, we will learn about CSS Social Media Icons Water Effect if you're a beginner I will recommend learning the Social Media Icons Water effect first. If you learn that and this blog will help you to learn about Creative 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 creative menu hover effect</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="home">
<i class="fas fa-home"></i>
</div>
<div class="about">
<i class="fas fa-file"></i>
</div>
<div class="account">
<i class="fas fa-user"></i>
</div>
<div class="contact">
<i class="fas fa-envelope"></i>
</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: center;
align-items: center;
height: 100vh;
width: 100%;
background-color: #262626FF;
}
div{
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 100px;
width: 100px;
font-size: 50px;
margin: 100px;
cursor: pointer;
}
div::after{
display: block;
position: absolute;
top: 100%;
left: 50%;
font-size: 25px;
font-family: cursive;
color: white;
opacity: 0;
}
.home::after{
content: 'Home';
}
.about::after{
content: 'About';
}
.account::after{
content: 'Account';
}
.contact::after{
content: 'Contact';
}
div:hover{
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: linear;
border-radius: 50%;
box-shadow: 1px 1px 60px black;
color: white;
}
div:hover::after{
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: linear;
left: 20%;
opacity: 1;
}
]
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 all Menu Hover effects to develop your skills. repeat the code for your practice this will help you to learn this Creative Menu Hover Effect more effectively and This video is also helpful to learn faster. Creative Menu Hover Effects are an important part of websites. I hope this tutorial will be helpful for learning the Creative Menu Hover effect. I will give you Source Code and you can download it.
COMMENTS