In the dynamic world of web design, capturing users’ attention from the moment they visit your website is paramount. One way to achieve this is by crafting a captivating, animated login form that not only serves its purpose but also adds an element of visual interest. This tutorial is your gateway to creating an eye-catching, animated login form using just HTML and CSS.
By the end of this step-by-step guide, you’ll be equipped with the knowledge and skills to design a login form that engages users with animations while maintaining simplicity.
Login forms are used in most of website and Application. The login form helps the user to get access to website or web application they are browsing. (To access their data). So a login form should be well designed.
What You Will Learn:
- Project Setup: Explain how to set up the project structure and create the initial HTML file.
- Building the HTML Structure: Describe the process of constructing the HTML structure for the login form.
- CSS Styling: Discuss how to style the form using CSS for a modern and sleek appearance.
- Creating Hover Effects: Explain how to make the form interactive with subtle hover effects.
- Transition Animations: Show how to implement animations that add dynamism to the form.
To make this login form we are going to start by. Creating a HTML File and add the following codes.
HTML codes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="style.css">
<title>Login | Ludiflex</title>
</head>
<body>
<div class="container">
<div class="login-box">
<div class="header-img">
<img src="images/user-icon-yl-4.png" alt="">
</div>
<div class="header-text">
<p>Login</p>
</div>
<div class="input-group">
<input type="text" class="input-field" id="username" required>
<label for="username">Username</label>
</div>
<div class="input-group">
<input type="password" class="input-field" id="password" required>
<label for="password">Password</label>
</div>
<div class="forgot-pass">
<a href="#">Forgot password?</a>
</div>
<div class="input-group">
<button class="input-submit">Login <i class="bx bx-log-in"></i></button>
</div>
</div>
</div>
</body>
</html>
CSS Codes
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
background: aqua;
}
.container{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.login-box{
position: relative;
width: 370px;
height: 450px;
background: rgb(0, 0, 0,0.83);
color: #fff;
padding: 80px 30px 25px 30px;
border-radius: 20px;
}
.header-img{
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, -50%);
}
.header-img img{
width: 100px;
}
.header-text{
text-align: center;
font-size: 24px;
font-weight: 500;
margin-bottom: 20px;
}
.input-group{
position: relative;
display: flex;
flex-direction: column;
}
.input-field{
height: 40px;
background: transparent;
color: #fff;
border: 0;
border-bottom: 1px solid #fff;
margin: 15px 0;
padding: 0 15px;
outline: none;
}
.input-field:focus,.input-field:valid{
border-bottom: 2px solid #d1e710;
}
.input-group label{
position: absolute;
top: 23px;
left: 3px;
transition: .3s;
}
.input-field:focus ~ label,.input-field:valid ~ label{
top: 5px;
font-size: 12px;
color: #d1e710;
}
.forgot-pass{
text-align: right;
margin-bottom: 10px;
}
.forgot-pass a{
color: #e9f76a;
font-size: 12px;
}
.input-submit{
height: 40px;
border-radius: 30px;
border: none;
background: #d1e710;
margin-top: 20px;
cursor: pointer;
transition: .4s ease-out;
}
.input-submit:hover{
box-shadow: 0 1px 10px rgb(254, 201, 26,0.5);
}
Think it was understandable. If you have any problem, leave a comment.
I will be pleased to help.
