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> <ul> <li><a href="#">Prev</a></li> <li><a href="#">Next</a></li> </ul> </body> </html> 2.style.css: body body { margin: 0; padding: 0; } ul { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; margin: 0; […]
Animated Tennis Ball code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Animated Tennis Ball</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="center"> <div class="ball"></div> <div class="shadow"></div> </div> </body> </html> 2.style.css: body { margin: 0; padding: 0; background: yellowgreen; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .ball […]
Flex Box Hover Effect code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Flex Box Hover Effect</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="box">Box One</div> <div class="box">Box Two</div> <div class="box">Box Three</div> <div class="box">Box Four</div> <div class="box">Box Five</div> <div class="box">Box Six</div> <div class="box">Box Seven</div> <div class="box">Box Eight</div> </div> </body> </html> […]
Pulse Animation code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Pulse Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="center"> <div class="pulse">pulse</div> </div> </body> </html> 2.style.css: body { margin: 0; padding: 0; background: black; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .pulse { width: 100px; height: […]
Div Hover Effect code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Div Hover Effect</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="center"> <div class="box"> <h1>Lorem ipsum dolor sit amet</h1> <p>Consectetur adipisicing elit. Repudiandae, excepturi quaerat. Id eaque, nostrum quia cum odit praesentium officia, debitis enim fugiat rerum maiores sequi sunt corporis […]
3D Skewed Button code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3D Skewed Button</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="center"> <a href="#"><span></span><span></span>Visual Code</a> </div> </body> </html> 2.style.css: body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } […]
Smoke Text Animation code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Smoke Text Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="center"> <ul> <li>S</li> <li>M</li> <li>O</li> <li>K</li> <li>E</li> </ul> </div> </body> </html> 2.style.css: body { margin: 0; padding: 0; background: black; font-family: Verdana, Geneva, Tahoma, sans-serif; } .center { position: absolute; […]
Rainbow Animation code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Rainbow Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="center"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html> 2.style.css: body { margin: 0; padding: 0; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); […]
3D Mockup code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3D Mockup</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="center"> <div class="page"> <h1>Visual Code</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis veritatis ullam perferendis numquam ipsum architecto quaerat suscipit sed porro distinctio sapiente nostrum impedit facere, vel mollitia deleniti […]
Image Hover Effect code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Image Hover Effect</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="center"> <div class="imgBox"> <img src="image1.jpg"> <div class="container"> <div class="content"> <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1> <p>Natus sit culpa optio deleniti numquam incidunt aliquid, nulla quod tempora iure nobis […]