Hello guys in this tutorial we will create Advance Menu Hover Animation using HTML & CSS
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Menu Hover Animation</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta https-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="style.css" /> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet"> </head> <body> <header class="main-header"> <div class="container"> <ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">FAQ's</a></li> <li><a href="#">Services</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </header> </body> </html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
* { padding: 0; margin: 0; font-family: 'IBM Plex Sans', sans-serif; } body { background: #f1f2f3; height: 100vh; } .container { width: 95%; max-width: 1160px; margin: auto; } .nav { display: flex; align-items: center; justify-content: center; list-style: none; } .nav > li { padding: 10px 20px; } .main-header { padding: 5px 0; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.2); } .nav > li > a { text-decoration: unset; font-size: 20px; position: relative; color: #484848; font-weight: 600; transition: color 0.6s ease-in-out; } .nav > li:hover a { background: -webkit-linear-gradient(#4b00ff , #FF9800); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .nav > li > a:before, .nav > li > a:after { content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 3px; background: #4b00ff; mix-blend-mode: multiply; transition: 0.6s; } ul.nav > li > a:after { background: #FF9800; top: -5px; right: 0; left: unset; } ul.nav > li:hover a:before, ul.nav > li:hover a:after { width: 50%; transform: translateX(100%); } ul.nav > li:hover a:after { transform: translateX(-100%); }