Telegram Group Join Now
ADVERTISEMENT
Animated Login Form Using HTML and CSS

ADVERTISEMENT
ADVERTISEMENT
Welcome to Code With Random blog. In this blog, we learn how to create an Animated Login Form. We use HTML and CSS for Animated Login Form.
I hope you enjoy our blog so let’s start with a basic html structure for the Login Form.
ADVERTISEMENT
Code by | Soufiane Khalfaoui HaSsani |
Project Download | Link Available Below |
Language used | HTML and CSS |
External link / Dependencies | No |
Responsive | No |
HTML Code For Animated Login Form
<div class="login-box"> <h2>Login</h2> <form> <div class="user-box"> <input type="text" name="" required=""> <label>Username</label> </div> <div class="user-box"> <input type="password" name="" required=""> <label>Password</label> </div> <a href="#"> <span></span> <span></span> <span></span> <span></span> Submit </a> </form> </div>
There is all the Html code for the animated Login Form. Now, you can see output without CSS, then we write CSS for the Animated Login Form.
ADVERTISEMENT
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Output
CSS Code For Animated Login Form
html { height: 100%; } body { margin:0; padding:0; font-family: sans-serif; background: linear-gradient(#141e30, #243b55); } .login-box { position: absolute; top: 50%; left: 50%; width: 400px; padding: 40px; transform: translate(-50%, -50%); background: rgba(0,0,0,.5); box-sizing: border-box; box-shadow: 0 15px 25px rgba(0,0,0,.6); border-radius: 10px; } .login-box h2 { margin: 0 0 30px; padding: 0; color: #fff; text-align: center; } .login-box .user-box { position: relative; } .login-box .user-box input { width: 100%; padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; } .login-box .user-box label { position: absolute; top:0; left: 0; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: .5s; } .login-box .user-box input:focus ~ label, .login-box .user-box input:valid ~ label { top: -20px; left: 0; color: #03e9f4; font-size: 12px; } .login-box form a { position: relative; display: inline-block; padding: 10px 20px; color: #03e9f4; font-size: 16px; text-decoration: none; text-transform: uppercase; overflow: hidden; transition: .5s; margin-top: 40px; letter-spacing: 4px } .login-box a:hover { background: #03e9f4; color: #fff; border-radius: 5px; box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4; } .login-box a span { position: absolute; display: block; } .login-box a span:nth-child(1) { top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #03e9f4); animation: btn-anim1 1s linear infinite; } @keyframes btn-anim1 { 0% { left: -100%; } 50%,100% { left: 100%; } } .login-box a span:nth-child(2) { top: -100%; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg, transparent, #03e9f4); animation: btn-anim2 1s linear infinite; animation-delay: .25s } @keyframes btn-anim2 { 0% { top: -100%; } 50%,100% { top: 100%; } } .login-box a span:nth-child(3) { bottom: 0; right: -100%; width: 100%; height: 2px; background: linear-gradient(270deg, transparent, #03e9f4); animation: btn-anim3 1s linear infinite; animation-delay: .5s } @keyframes btn-anim3 { 0% { right: -100%; } 50%,100% { right: 100%; } } .login-box a span:nth-child(4) { bottom: -100%; left: 0; width: 2px; height: 100%; background: linear-gradient(360deg, transparent, #03e9f4); animation: btn-anim4 1s linear infinite; animation-delay: .75s } @keyframes btn-anim4 { 0% { bottom: -100%; } 50%,100% { bottom: 100%; } }
Now we have completed our Animated Login Form. Here is our final updated output HTML CSS.
ADVERTISEMENT
50+ HTML, CSS & JavaScript Projects With Source Code
Final Output Of Animated Login Form
Portfolio Website using HTML and CSS (Source Code)
ADVERTISEMENT
Here is our updated output with CSS. I hope you like the Animated Login Form. You can see output project screenshots. See our other blogs and gain knowledge in front-end development.
ADVERTISEMENT
Thank you!
In this post, we learn how to create an Animated Login Form Using HTML and CSS. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.
Written by – Code With Random/Anki
Code by – Soufiane Khalfaoui HaSsani
Which code editor do you use for this Animated Login Form coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
ADVERTISEMENT
is this project responsive or not?
No! this is not a responsive project
ADVERTISEMENT
Do you use any external links to create this project?
No!
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
The sumit tag is not clickable and css not working after form tag. [ .login-box form a{
….
} ]
same me not working css or style.css ?