CSS Menu Hover Effects

Hello friends. Today I will share a snippet with menu hover animation in this blog. The navigation menu is an organized list of links. By clicking on these links, a user can visit different sections or pages of that website. Take a look at the video tutorial below before collecting the code. This tutorial will help you to understand your code properly. We've shared over 1000 front-end development videos on our youtube channel. You can watch those videos if you want.

I assume you have watched the video tutorial and understood the code. Many companies use a variety of animations on their websites to increase user interaction. There is a reason for this. Many users prefer animated-type websites to general static websites. Adding animation to different elements of the website enhances the aesthetics of the website. In this snippet, we have given a hover animation to the menu elements. Hovering the menu links will change its color and a round shape will appear on the back. To create this animation we have taken the help of CSS transform style, CSS transform translate with a cubic-bezier transition to make the animation smooth.

You may also like:

CSS Menu hover Effect [ Source Code ]:

First, create two files. One is the HTML file and, the other is the CSS file. When creating the files, give the file extensions correctly. Now copy the code given below and paste it into your files.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<title>CSS Creative Menu Hover Effects | CSS Animation Examples</title>
	<link href="https://fonts.googleapis.com/css2?family=Cookie&display=swap" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<ul>
		<li>
			<a href="#">Home</a>
		</li>
		<li>
			<a href="#">About</a>
		</li>
		<li>
			<a href="#">Services</a>
		</li>
		<li>
			<a href="#">Portfolio</a>
		</li>
		<li>
			<a href="#">Contact</a>
		</li>
	</ul>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
}
body {
	background: aquamarine;
	font-family: 'Cookie', cursive;
}
ul {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	text-align: center;
	padding: 20px;
}
ul li {
	display: inline-block;
	list-style: none;
	margin: 5px;
	padding: 10px 35px;
}
ul li a {
	text-decoration: none;
	font-size: 60px;
	color: #000;
	position: relative;
	transition: all 0.5s ease;
	font-weight: 500;
}
ul li a::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	background: #80002b;
	border-radius: 50%;
	transform-style: preserve-3d;
	transform: translate(-50%, -50%) scale(0);
	transition: all 2s cubic-bezier(.43, 1.91, .351, .74);
	z-index: -1;
}
ul li:hover a:after {
	transform: translate(-50%, -50%) scale(1.2);
}
ul li:hover a {
	color: #fff;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.9);
}

This brings us to the end of this tutorial. Hopefully, you have implemented the code correctly. In this blog, we regularly share front-end development-related code snippets. Share the blog with any like-minded person or student. Learn for yourself and give others a chance to learn. Thank you so much for visiting our blog.

Post a Comment

Post a Comment

About Us

Contact Form

CSS Menu Hover Effects

You might like

Post a Comment

Post a Comment

Contact Form