In the fast-changing realm of web design, making a login form that looks good and is easy for people to use is very important. This complete guide will help you make a modern login form using only HTML and CSS. By the time you finish this step-by-step tutorial, you’ll have a nice and adaptable login form that’s similar to the simple style of Google. You can follow along with this guide to make your website more user-friendly and improve your web design abilities.
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).
Step 1: HTML Structure for the Modern Login Form
Here, you’ll learn how to create the fundamental HTML structure for the login form. We’ll cover setting up the form container, adding input fields for username and password, and integrating a submit button.
Step 2: CSS Styling for this login form
This segment is the core of the tutorial. We’ll delve into the CSS styling of the login form. You’ll gain expertise in defining the form’s layout, enhancing the appearance of input fields, crafting a captivating submit button, and introducing subtle animation effects to engage your users.
Step 3: Ensuring Responsiveness
This part of the tutorial focuses on making your login form responsive. We’ll employ CSS media queries to guarantee that the form adapts seamlessly to various screen sizes, including desktops and mobile devices.
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 name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign In | Ludiflex</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-box">
<div class="login-header">
<header>Welcome</header>
<p>We are happy to have you back!</p>
</div>
<div class="input-box">
<input type="text" class="input-field" id="email" autocomplete="off" required>
<label for="email">Email or phone</label>
</div>
<div class="input-box">
<input type="password" class="input-field" id="password" autocomplete="off" required>
<label for="password">Password</label>
</div>
<div class="forgot">
<section>
<input type="checkbox" id="check">
<label for="check">Remember me</label>
</section>
<section>
<a href="#" class="forgot-link">Forgot password?</a>
</section>
</div>
<div class="input-box">
<input type="submit" class="input-submit" value="Sign In">
</div>
<div class="middle-text">
<hr>
<p class="or-text">Or</p>
</div>
<div class="social-sign-in">
<button class="input-google">
<img src="images/google.png" alt="">
<p>Sign In with Google</p>
</button>
<button class="input-twitter">
<img src="images/twitter.png" alt="">
</button>
</div>
<div class="sign-up">
<p>Don't have account <a href="#">Sign up</a></p>
</div>
</div>
</body>
</html>
CSS Codes
/* ROBOTO FONT */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
/* POPPINS FONT */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto',sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.login-box{
position: relative;
width: 470px;
height: 520px;
padding: 10px 30px;
background: #FFF;
border: 1px solid #ddd;
border-radius: 10px;
}
.login-header{
display: flex;
flex-direction: column;
text-align: center;
margin: 20px 0 50px 0;
}
.login-header header{
font-family: 'Poppins', sans-serif;
color: #333;
font-size: 30px;
margin-bottom: 5px;
}
.login-header p{
color: #555;
}
.input-box{
position: relative;
width: 100%;
}
.input-box label{
position: absolute;
top: 15px;
left: 15px;
color: #555;
transition: .15s ease-in-out;
}
.input-box input{
width: 100%;
height: 50px;
}
.input-box .input-field{
font-size: 1em;
color: #333;
padding-left: 15px;
margin-bottom: 25px;
border: 1px solid #ddd;
border-radius: 3px;
outline: none;
}
.input-box input[type="password"]{
margin-bottom: 10px;
}
.input-box .input-field:focus{
border: 2px solid #8749F2;
}
.input-field:focus ~ label, .input-field:valid ~ label{
top: -8px;
left: 12px;
font-size: 12px;
color: #7931F5;
background: #FFF;
padding: 0 5px;
}
.input-field:valid ~ label{
color: #555;
}
.forgot{
display: flex;
justify-content: space-between;
margin-bottom: 25px;
}
section{
display: flex;
align-items: center;
font-size: 14px;
color: #555;
}
#check{
margin-right: 10px;
}
section .forgot-link{
font-weight: 500;
text-decoration: none;
color: #7931F5;
}
.input-submit{
font-family: 'Poppins', sans-serif;
font-size: 15px;
color: #FFF;
background: #7931F5;
border: none;
border-radius: 5px;
cursor: pointer;
}
.middle-text{
position: relative;
width: 100%;
margin: 30px 0;
}
.or-text{
font-family: 'Poppins', sans-serif;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
background: #FFF;
color: #777;
padding: 10px;
}
hr{
border: 1px solid #ddd;
}
.social-sign-in{
display: flex;
gap: 15px;
}
button{
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 5px;
cursor: pointer;
}
.input-google{
width: 100%;
height: 50px;
padding: 0 30px;
background: #FFF;
border: 1px solid #CCC;
}
.input-google img{
width: 25px;
}
.input-google p{
font-family: 'Poppins', sans-serif;
font-size: 15px;
width: 90%;
}
.input-twitter{
justify-content: center;
width: 70px;
height: 50px;
background: #EEE;
border: none;
}
.input-twitter img{
width: 20px;
}
.input-google:hover,
.input-twitter:hover,
.input-submit:hover{
opacity: 0.9;
}
.sign-up{
position: absolute;
bottom: -30px;
right: 0;
}
.sign-up p{
font-size: 14px;
color: #333;
}
.sign-up p>a{
text-decoration: none;
}
@media only screen and (max-width: 510px){
.login-box{
padding: 10px 30px;
margin: 20px;
}
}
@media only screen and (max-width: 415px){
.login-box{
padding: 10px 25px;
margin: 15px;
}
}
Think it was understandable. If you have any problem, leave a comment.
I will be pleased to help.
