Intro
Hello, reader welcome to my new blog. Today in this blog we are going to learn an outstanding login and registration form using HTML and CSS. But as you know I always try to give some extra to my readers and today also I got some special features for my readers today we are going to make a magnificent animated login and registration form so let’s get it.
But before that, there are a few things that you should understand about the login and registration forms. There are some important things that we are going to discuss today. The main thing in any login form is to convey your message by attracting people to the main purpose of your login form. Yes, I am talking about the UI User Interface.
What is User Experience?
Do you know that 88% of online clients are less likely to come back to a website because of a bad experience? You have definitely heard website developers, designers, and market analysts always talk about a website’s user experience, or UX. But do you understand what this statement means? There are countless definitions of “user experience.”
When a customer visits our website, he should easily understand the main purpose of the design, or we can say he gets attracted to the layout or the login forms or the website, so we can attract the attention of the customer to the main purpose of our layout. So today I am going to share with you all. What is the best way to get the attention of the customer? and that is animation.
What is Animation?
Actually, animations are moving images, specific areas, or a part of the layout or design that a web developer uses to attract the customer’s attention and usually motivate them to take a specific action. They can be little animations that direct a user’s attention to a specific piece, convey a commercial message, or assist users in moving more fluidly across a webpage. Now which one is more effective? a normal login form or an animated login form.
So as per my recommendation, the animated login form is much more attractive and pleasurable than the normal form because usually people like moving things or images in their daily routine, which gives them focus on a certain point or we can get their attention, and it’s far better than a normal image. Now, we will start to make an animated login form by using HTML and CSS step-by-step.
How to make an Animated Login Form by using HTML and CSS step-by-step
As you can see in the top image, we have a login form in which we have got two fields one for the username and a second for the password and then after it, we have a forget password and then a login button, and in the last, I have given an option of not a member? Signup ok so first we will make a login form then we will add some attractive animation in the field of the username and the password.
Steps To Create a Login Animated form using HTML CSS
- We will make two files. One is HTML and the second is CSS.
- Then we will connect our CSS fill with the HTML file by using this code. {<link rel=”stylesheet” href=”style.css”>}.
- Then we will make a beautiful background with the property {background: linear-gradient property}.
- Then we will make a login form.
- Then we will add some small animations to the form.
For making a login form first we will make a file with the name index.html then copy the given source code of HTML and paste it into your HTML file.
HTML FILE
<!DOCTYPE html> <!-- Created By CodingPakistan - youtube.com/@codingpakistan --> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Animated Login Form | CodingPakistan</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="center"> <h1>Login</h1> <form method="post"> <div class="txt_field"> <input type="text" required> <span></span> <label>Username</label> </div> <div class="txt_field"> <input type="password" required> <span></span> <label>Password</label> </div> <div class="pass">Forgot Password?</div> <input type="submit" value="Login"> <div class="signup_link"> Not a member? <a href="#">Signup</a> </div> </form> </div> </body> </html>
Similarly, make a file with the name style.CSS and copy the source code which I have provided below, and paste it into your CSS file. You can also be creative if you know some basics of CSS you can change the color of the background or you can change the color of the animation I have chosen the blue color you can select any other color like purple or any other as your desire cause if you have the basic knowledge of CSS you can play with the colors or can be more creative as per your desire.
CSS FILE
/* <!-- Created By CodingPakistan - youtube.com/@codingpakistan --> */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
margin: 0;
padding: 0;
background: linear-gradient(120deg,#2980b9, #8e44ad);
height: 100vh;
overflow: hidden;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background: white;
border-radius: 10px;
box-shadow: 10px 10px 15px rgba(0,0,0,0.05);
}
.center h1{
text-align: center;
padding: 20px 0;
border-bottom: 1px solid silver;
}
.center form{
padding: 0 40px;
box-sizing: border-box;
}
form .txt_field{
position: relative;
border-bottom: 2px solid #adadad;
margin: 30px 0;
}
.txt_field input{
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
}
.txt_field label{
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .5s;
}
.txt_field span::before{
content: '';
position: absolute;
top: 40px;
left: 0;
width: 0%;
height: 2px;
background: #2691d9;
transition: .5s;
}
.txt_field input:focus ~ label,
.txt_field input:valid ~ label{
top: -5px;
color: #2691d9;
}
.txt_field input:focus ~ span::before,
.txt_field input:valid ~ span::before{
width: 100%;
}
.pass{
margin: -5px 0 20px 5px;
color: #a6a6a6;
cursor: pointer;
}
.pass:hover{
text-decoration: underline;
}
input[type="submit"]{
width: 100%;
height: 50px;
border: 1px solid;
background: #2691d9;
border-radius: 25px;
font-size: 18px;
color: #e9f4fb;
font-weight: 700;
cursor: pointer;
outline: none;
}
input[type="submit"]:hover{
border-color: #2691d9;
transition: .5s;
}
.signup_link{
margin: 30px 0;
text-align: center;
font-size: 16px;
color: #666666;
}
.signup_link a{
color: #2691d9;
text-decoration: none;
}
.signup_link a:hover{
text-decoration: underline;
}
Know your amazing and attractive animated login or registration form is ready. If you want to learn more deeply you can also watch this video which I have provided below.
You might like this:
Video Tutorial of Login Form Using only HTML CSS.
That’s all, now you’ve successfully created an animated Login and Registration Form in HTML and CSS. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
For further amazing and pleasurable topics keep visiting my YouTube channel and website www.codingpakistan.com. I always try to give some special techniques to my readers. Thank you for your time I am sure you will like my content, and if any other topic is on your mind so feel free and share it with me.