CSS Creative Menu Hover Effects

Hello friends Today we will learn how to create a beautiful menu hover effect with HTML and CSS. The navigation menu acts as the navigator of a website. If this navigation menu is presented nicely in front of the visitors, then the impression of the website will increase. We have shared many videos related to front-end development on our YouTube channel. If you have time, you can watch the videos of the channel by clicking on the link.

Hope you watched the whole video and understood how it was made. Animation can make a website look great in a simple look. With CSS alone, we can give beautiful animation effects to all the elements of a website.

In this project, we have used CSS animation effect in an important content like navigation menu of the website. Although simple to look at, the animation will present the menu items of your website nicely to the visitors.

To create a snippet, you need to create a CSS and HTML file. Then you have to attach the CSS file to the HTML file. Then you have to copy the code given below and paste it into your HTML and CSS file. If you have any problem with the code given below, you can download the code from the download button.

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=Poppins:wght@900&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: #2e3e51;
	font-family: poppins;
}
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 30px;
}
ul li a {
	text-decoration: none;
	font-size: 35px;
	color: #fff;
	position: relative;
	transition: all 0.5s ease;
	font-weight: 900;
}
ul li a::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 55px;
	background: #1eb297;
	transform-style: preserve-3d;
	transform: scale(0) rotateY(0deg) skew(10deg);
	transition: all .5s cubic-bezier(.43, .91, .35, .74);
	z-index: -1;
}
ul li:hover a:before {
	transform: scale(1.2) rotateY(360deg) skew(-10deg);
}
ul li:hover a {
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
}

Hopefully, you have been able to implement the code properly. If you like this snippet, please share our blog's articles. Thanks for visiting our website.

DOWNLOAD CODE

You may also like:

Post a Comment

Post a Comment

About Us

Contact Form

CSS Creative Menu Hover Effects

You may also like:

You might like

Post a Comment

Post a Comment

Contact Form