Responsive Animated Login Form Using HTML, CSS & JavaScript

October 20, 2020

Hello readers, in this article we’ll learn how to create a Responsive Animated Login Form Using HTML & CSS & JavaScript. previously I have shared Modern Form Design | Login & SignUp Form | HTML | CSS and now it’s time to create an Responsive Animated Login Form Using HTML & CSS & JavaScript.

In this program (Responsive Animated Login Form Using HTML & CSS & JavaScript), on the webpage, there’s a login page or form as you can see in the image. When you click on the input button, the label smoothly slides from the down to the up and shows the input placeholder. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Responsive Animated Login Form Using HTML & CSS & JavaScript).

In this article, you have seen an animated login and signup form and I hope you’ve understood the basic codes behind the screen of this program. I used just a few lines of JavaScript codes to complete this form so if you’re a beginner, you can easily create this type of login form.

In this, we’ve picked up a beautiful JavaScript login form, registration form, and contact form that you will be able to create your own jquery form from these tutorials. Every Login form should have client-side validation. If we have not used client-side validation, the code will go to the server and check the username and password, it will increase server traffic. By using client-side validation null username and password can be filtered in the browser itself so that we can reduce server traffic.

Generally using JavaScript login registration or contact form to allow anyone can become a registered user by providing some personal information, and he can access information and privileges unavailable to non-registered users. But the important thing is, Most users will not use your web site if they have to register because the registration takes time. In most cases, the user will just move on to another web site.

Play Video

In this article, learn How to build Animated Login Form with some effects & also I have used the isometric image to give its amazing look. It is important to have a login form that is not only interactive but also one that looks good. Professional-looking user login & registration page makes your users trust your site. If you like this program (Responsive Animateesponsive Animated Login Form Using HTML & CSS & JavaScript). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes into your file.

if any website has a membership or user feature, then they probably have a separate login page. Mostly other useful links like sign up, forgot passwords, etc page’s direction available on the login page. If you have a login page or planning to create then you take inspiration from this post.

Today you will learn to create a login page with image and animation using pure HTML, CSS & JavaScript. There is an image, a form, and some texts, they all have an animation effect. You can modify it according to your requirement. I know this is simple work, but one of my visitors asks me for creating this.

So, Today I am sharing Animated Login Page In HTML CSS & JavaScript. I have used pure CSS for creating all the animation effects, delay, etc. You can switch the position of form and image very easily, you just have to change values or change the class name.

If you like this program (Responsive Animated Login Form Using HTML, CSS & JavaScript) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.
If you’re a beginner you can use this Login Form in your project and websites. I believe this login form code will help you a lot. Or if you have some knowledge of JavaScript or PHP you can add some functions in this format and use it according to your requirements.

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Animated Login Form</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link href="https://fonts.googleapis.com/css?family=Poppins:600&display=swap" rel="stylesheet">
	<script src="https://kit.fontawesome.com/a81368914c.js"></script> 
</head>
<body>
	 <img decoding="async" class="wave" src="img/wave.jpg">
	 <div class="container">
		 <div class="img">
			 <img decoding="async" src="img/login.svg">
		 </div>
		 <div class="login-content">
			 <form action="index.html">
				 <img decoding="async" src="img/user.svg">
				 <h2 class="title">Welcome</h2>
				 <div class="input-div one">
					 <div class="i">
						 <i class="fas fa-user"></i>
					 </div>
					 <div class="div">
						 <h5>Username</h5>
						 <input type="text" class="form-control">
					 </div>
				 </div>
				 <div class="input-div pass">
					<div class="i">
						<i class="fas fa-lock"></i>
					</div>
					<div class="div">
						<h5>Password</h5>
						<input type="password" class="form-control">
					</div>
				</div>
				<a href="#">Forget Password?</a>
				<input type="submit" class="btn" value="Login">
			 </form>
		 </div>
	 </div>
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

CSS

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body{
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
}
.wave{
	position: fixed;
	bottom: 0;
	left: 0;
	height: 100%;
	z-index: -1;
}
.container{
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap :7rem;
    padding: 0 2rem;
}
.img{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.login-content{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	text-align: center;
}
.img img{
	width: 500px;
}
form{
	width: 360px;
}
.login-content img{
    height: 100px;
}
.login-content h2{
	margin: 15px 0;
	color: #333;
	text-transform: uppercase;
	font-size: 2.9rem;
}
.login-content .input-div{
	position: relative;
    display: grid;
    grid-template-columns: 7% 93%;
    margin: 25px 0;
    padding: 5px 0;
    border-bottom: 2px solid #d9d9d9;
}
.login-content .input-div.one{
	margin-top: 0;
}
.i{
	color: #d9d9d9;
	display: flex;
	justify-content: center;
	align-items: center;
}
.i i{
	transition: .3s;
}
.input-div > div{
    position: relative;
	height: 45px;
}
.input-div > div > h5{
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: #999;
	font-size: 18px;
	transition: .3s;
}
.input-div:before, .input-div:after{
	content: '';
	position: absolute;
	bottom: -2px;
	width: 0%;
	height: 2px;
	background-color: #625bff;
	transition: .4s;
}
.input-div:before{
	right: 50%;
}
.input-div:after{
	left: 50%;
}
.input-div.focus:before, .input-div.focus:after{
	width: 50%;
}
.input-div.focus > div > h5{
	top: -5px;
	font-size: 15px;
}
.input-div.focus > .i > i{
	color: #625bff;
}
.input-div > div > input{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: none;
	outline: none;
	background: none;
	padding: 0.5rem 0.7rem;
	font-size: 1.2rem;
	color: #555;
	font-family: 'poppins', sans-serif;
}
.input-div.pass{
	margin-bottom: 4px;
}
a{
	display: block;
	text-align: right;
	text-decoration: none;
	color: #999;
	font-size: 0.9rem;
	transition: .3s;
}
a:hover{
	color: #625bff;
}
.btn{
	display: block;
	width: 100%;
	height: 50px;
	border-radius: 25px;
	outline: none;
	border: none;
	background-image: linear-gradient(to right, #625bff, #625bff, #625bff);
	background-size: 200%;
	font-size: 1.2rem;
	color: #fff;
	font-family: 'Poppins', sans-serif;
	text-transform: uppercase;
	margin: 1rem 0;
	cursor: pointer;
	transition: .5s;
}
.btn:hover{
	background-position: right;
}

@media screen and (max-width: 1050px){
	.container{
		grid-gap: 5rem;
	}
}

@media screen and (max-width: 1000px){
	form{
		width: 290px;
	}

.login-content h2{
        font-size: 2.4rem;
        margin: 8px 0;
	}

.img img{
		width: 400px;
	}
}

@media screen and (max-width: 900px){
	.container{
		grid-template-columns: 1fr;
	}

.img{
		display: none;
	}

.wave{
		display: none;
	}

.login-content{
		justify-content: center;
	}
}

JS

16 thoughts on “Responsive Animated Login Form Using HTML, CSS & JavaScript”

Columbus says:

March 9, 2021 at 7:14 am

Thanks for your personal marvelous posting! I certainly enjoyed reading it,
you can be a great author. I will make certain to bookmark
your blog and will often come back later in life. I want to
encourage that you continue your great posts,
have a nice morning!

Reply
VFlameZ says:

March 10, 2021 at 9:01 pm

Hi, I have one request. Can I have the link of the wave picture?

Reply
Susie says:

May 5, 2021 at 7:01 am

Hey there! I could have sworn I’ve been to this website before but after checking through some of the post I realized it’s new to me.
Anyways, I’m definitely glad I found it and I’ll
be book-marking and checking back often!

Reply
vorbelutrioperbir says:

January 16, 2023 at 9:16 pm

WONDERFUL Post.thanks for share..extra wait .. …

Reply
vorbelutrioperbir says:

March 1, 2023 at 5:22 am

Everyone loves what you guys tend to be up too. This type of clever work and coverage! Keep up the superb works guys I’ve included you guys to my personal blogroll.

Reply
time water bottle says:

September 15, 2023 at 9:44 pm

Thank you for your blog article.Really thank you! Cool.

Reply
Khuskhus Malvani Masala says:

September 17, 2023 at 5:02 am

I am so grateful for your article post.Thanks Again. Keep writing.

Reply
chandelier manufacturers says:

September 30, 2023 at 10:45 am

Really enjoyed this blog article.Really thank you! Awesome.

Reply
https://vapemanufactory.com/post/what-is-the-worlds-safest-vape/ says:

November 29, 2023 at 11:25 am

Thank you ever so for you blog post.Really looking forward to read more. Really Cool.

Reply
Hmall says:

November 30, 2023 at 10:39 am

Awesome post.Really thank you! Awesome.

Reply
undress ai says:

December 29, 2023 at 10:25 pm

Awesome blog article.

Reply
best destination for family vacation says:

December 31, 2023 at 10:01 am

I value the article post.Really looking forward to read more. Keep writing.

Reply
lenovo i5 11th generation laptop says:

January 1, 2024 at 9:15 pm

A round of applause for your blog post.Really looking forward to read more. Awesome.

Reply
chemistry lab bench suppliers says:

January 20, 2024 at 11:44 pm

This is one awesome blog. Want more.

Reply
Rizz App says:

April 14, 2024 at 2:04 pm

Really appreciate you sharing this article post.Really thank you! Keep writing.

Reply
Rizz GPT says:

May 13, 2024 at 2:41 pm

Great blog article.Thanks Again. Awesome.

Reply