Hello readers, Today In this article you’ll learn how to create Animated Menu Indicator using HTML, CSS & JavaScript. This type of CSS Icon Hover Effects is used on websites For social icon & button design. This kind of CSS Icon Hover Effects Design looks attractive on website.
You easily create this Animated Menu Indicator with hover effects using CSS & JavaScript. then this article will definitely help you. For this, you need to have an idea about basic HTML, CSS, and JavaScript then you can understand the following codes. It is designed in a completely modern way.
Some Information About This CSS Icon Hover Effects
In this program (CSS Icon Hover Effects), at first, on the webpage, there are five Icon buttons – Home, Profile, Message, Help, and Settings. When you hover on a particular button or icon then the icon glowing background color appears with sliding animation and the font size of a icon also changes with the default icon size. Inside the hover button, there is the name of a particular hovered icon button as you have seen in the image.
Watch the video tutorial to create CSS Icon Hover Effects
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made these CSS Icon Hover Effect With animation step by step completely beautifully. So you can learn how to make these Animated Menu Indicator. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this CSS Icon Hover Effects Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Responsive Login Form Design using HTML & CSS
- Ecommerce Product Card Design using HTML & CSS
- Custom Scrollbar Using HTML & CSS
CSS Icon Hover Effects | Source Codes
To create this program (CSS Icon Hover Effects). First, you need to create three Files one HTML, CSS File and another one is JS File. After creating these files just paste the following codes in your file.
After create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use.
HTML CODE:
<!DOCTYPE html>
<br lang="en">
<head>
<meta charset="UTF-8">
<title>Animate Icon Hover Effect</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navigation">
<ul>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="home-outline"></ion-icon>
</span>
<span class="text">Home</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="person-outline"></ion-icon>
</span>
<span class="text">Profile</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="chatbubble-outline"></ion-icon>
</span>
<span class="text">Messsge</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="help-circle-outline"></ion-icon>
</span>
<span class="text">Help</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="cog-outline"></ion-icon>
</span>
<span class="text">Settings</span>
</a>
</li>
<div class="indicator"></div>
</ul>
</div>
<script src="js.js"></script>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
</body>
</html>
After to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:[email protected];400;500;700&display=swap');
/* font-family: 'Ubuntu', sans-serif; */
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Ubuntu', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #333;
}
.navigation{
position: relative;
width: 350px;
height: 70px;
}
.navigation ul{
display: flex;
}
.navigation ul li{
position: relative;
width: 70px;
height: 70px;
list-style: none;
z-index: 1;
}
.navigation ul li a{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
color: #fff;
}
.navigation ul li a .icon{
position: relative;
line-height: 75px;
transition: 0.5s;
font-size: 30px;
}
.navigation ul li.active a .icon{
font-size: 20px;
transform: translateY(-6px);
}
.navigation ul li a .text{
position: absolute;
bottom: 20px;
color: #fff;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
transform: scale(0);
transition: 0.25s;
}
.navigation ul li.active a .text{
transform: scale(1);
}
.indicator{
position: absolute;
width: 70px;
height: 70px;
left: 0;
border-radius: 10px;
transition: 0.5s;
}
.navigation ul li:nth-child(1).active ~ .indicator{
background: #f53b57;
box-shadow: 0 15px 25px #f53b5799;
transform: translateX(calc(70px * 0));
}
.navigation ul li:nth-child(2).active ~ .indicator{
background: #5d62fb;
box-shadow: 0 15px 25px #5d62fb99;
transform: translateX(calc(70px * 1));
}
.navigation ul li:nth-child(3).active ~ .indicator{
background: #05c46b;
box-shadow: 0 15px 25px #05c46b99;
transform: translateX(calc(70px * 2));
}
.navigation ul li:nth-child(4).active ~ .indicator{
background: #0fbcf9;
box-shadow: 0 15px 25px #0fbcf999;
transform: translateX(calc(70px * 3));
}
.navigation ul li:nth-child(5).active ~ .indicator{
background: #ffa801;
box-shadow: 0 15px 25px #ffa80199;
transform: translateX(calc(70px * 4));
}Third step, After to create a JS file with the name of js.js and paste the given codes in your js file. Remember, you’ve to create a file with .js extension.
JS Code:
let list = document.querySelectorAll(".list");
let indicator = document.querySelector(".indicator");
function addActiveClass() {
list.forEach((item) => item.classList.remove("active"));
this.classList.add("active");
}
list.forEach((item) => item.addEventListener("mouseover", addActiveClass));
function removeActiveClass(){
list.forEach((item) => item.classList.remove("active"));
this.classList.remove("active");
}
list.forEach((item) => item.addEventListener("mouseout", removeActiveClass));now you’ve successfully created these CSS Icon Hover Effects. If your code does not work or facing any error/problem to comment down or contact us through the contact page. Or you can download the source code here click on the download button below.
