Split Text Hover Effect code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Split Text Hover Effect</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1 data-title="Split">Split</h1> </body> </html> 2.style.css: body { margin: 0; padding: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; } h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 8em; […]
Cool Button Hover Effect code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Cool Button Hover Effect</title> <link rel="stylesheet" href="style.css"> </head> <body> <a href="#" data-title="Button">Button</a> </body> </html> 2.style.css: body { margin: 0; padding: 0; background: black; } a { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 180px; line-height: 60px; […]
Scroll Down Animation code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Scroll Down Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="center"> <div class="arrow"></div> </div> </body> </html> 2.style.css: body { margin: 0; padding: 0; background: blue; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0; height: 160px; […]
Awesome Button Hover Effect code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Button Hover Effect</title> <link rel="stylesheet" href="style.css"> </head> <body> <a href="#"> <div class="front">Button</div> <div class="back">Button</div> </a> </body> </html> 2.style.css: body { margin: 0; padding: 0; } a { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 180px; height: […]
Button Design code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Button Design</title> <link rel="stylesheet" href="style.css"> </head> <body> <a href="#">Button</a> </body> </html> 2.style.css: body { margin: 0; padding: 0; } a { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: black; height: 60px; width: 200px; line-height: 60px; text-align: center; font-family: […]
Text Reveal Animation code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Text Reveal Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box"> <h1>Visual Code</h1> </div> </body> </html> 2.style.css: body { margin: 0; padding: 0; background: yellowgreen; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; border-bottom: 5px […]
Button Border Animation code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Button Hover Effect</title> <link rel="stylesheet" href="style.css"> </head> <body> <a href="#"><span></span>Button</a> </body> </html> 2.style.css: body { margin: 0; padding: 0; background: black; } a { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 180px; height: 50px; background: black; text-transform: […]
Simple Preloader code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Simple Preloader</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loader"> <span></span> <span></span> <span></span> </div> </body> </html> 2.style.css: body { margin: 0; padding: 0; } span:nth-child(1) { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 60px; height: 60px; border: 6px solid […]
Button Hover Effects code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Button Hover Effects</title> <link rel="stylesheet" href="style.css"> </head> <body> <a href="#"><span>Button</span></a> </body> </html> 2.style.css: body { margin: 0; padding: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; } a{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 20px; color: black; padding: […]
Text Filling With Water code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Text Filling With Water</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loader"> <h1>Water</h1> </div> </body> </html> 2.style.css: body { margin: 0; padding: 0; background: black; font-family: Verdana, Geneva, Tahoma, sans-serif; } .loader { position: absolute; top: 50%; left: 50%; […]