Create a Menu Hover Glow Effect using HTML and CSS
Are you looking to add some pizzazz to your website's navigation menu? Look no further than the "Menu Hover Glow" effect! This subtle yet eye-catching effect adds a glow to your navigation menu items when the user hovers over them.
In this tutorial, we'll show you how to create this effect using HTML and CSS. Here are the steps:
1.Create the HTML navigation menu structure: Start by creating a navigation bar using the <nav> and <ul> tags. Then, add the menu items using the <li> and <a> tags. For example:
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li style="--clr:#00ade1">
<a href="#" data-text=" Home"> Home </a>
</li>
<li style="--clr:#ff6492">
<a href="#" data-text=" About"> About </a>
</li>
<li style="--clr:#ffdd1c">
<a href="#" data-text=" Services"> Services </a>
</li>
<li style="--clr:#00dc82">
<a href="#" data-text=" Blog"> Blog </a>
</li>
<li style="--clr:#dc00d4">
<a href="#" data-text=" Contact"> Contact </a>
</li>
</ul>
</body>
</html>
--------------------------------------------------------------------------------------------
2.Style the navigation menu using CSS: To start, remove the default list styles and add some basic styles to the navigation menu. For example:
CSS:
@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap');
*{
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Mochiy Pop One', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #252839;
}
ul{
position: relative;
display: flex;
flex-direction: column;
gap: 30px;
}
ul li{
position: relative;
list-style: none;
}
ul li a{
font-size: 4em;
text-decoration: none;
letter-spacing: 2px;
line-height: 1em;
text-transform: uppercase;
color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,0.5);
}
ul li a::before{
content: attr(data-text);
position: absolute;
color: var(--clr);
width: 0;
overflow: hidden;
transition: 1s;
border-right: 8px solid var(--clr);
-webkit-text-stroke: 1px var(--clr);
}
ul li a:hover::before{
width: 100%;
filter: drop-shadow(0 0 25px var(--clr));
}
-----------------------------------------------------------------------------------------
And there you have it - a beautiful and functional navigation menu with the "Menu Hover Glow" effect!
Overall, the "Menu Hover Glow" effect is a simple yet powerful way to add some extra interactivity to your website. Give it a try and see how it can elevate your design.
Comments
Post a Comment