Awesome Text Hover Effect code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Awesome Text Hover Effect</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1 data-text="Awesome">Awesome</h1> </body> </html>
2.style.css:
body { margin: 0; padding: 0; background: yellow; } h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 6em; font-family: Verdana, Geneva, Tahoma, sans-serif; text-transform: uppercase; margin: 0; padding: 0; letter-spacing: 2px; -webkit-text-fill-color: white; -webkit-text-stroke-width: 2px; } h1::before { content: attr(data-text); position: absolute; top: 0; left: 0; color: yellowgreen; letter-spacing: 2px; -webkit-text-fill-color: pink; -webkit-text-stroke-width: 2px; height: 0; overflow: hidden; transition: 2s; } h1::after { content: attr(data-text); position: absolute; top: 0; left: 0; color: red; letter-spacing: 2px; -webkit-text-fill-color: black; -webkit-text-stroke-width: 2px; width: 0; overflow: hidden; transition: 2s; } h1:hover::before { height: 100%; } h1:hover::after { transition-delay: 1s; width: 100%; }
