WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Menu hover glow
2337
Andev.web
Open In Editor
Publish Your Code
Recommended
28 November 2024
Animated Menu
28 November 2024
Animated Link Hover
HTML
Copy
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Andev Web</title> <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>
CSS
Copy
* { 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)) }
JS
Copy
