WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
2453
Andev.web
Abrir no Editor
Publique Seu Código
Recomendado
28 January 2025
BOTÃO
10 April 2025
Um código de cleanbug411
25 April 2025
Um Código de Metehan
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
