Accessing personalised content and services on a website is made possible through a login and register form. Users can engage with the platform in a seamless and safe manner thanks to these fundamental components. To ensure verified access to their accounts, current users can fill out the login form with their login information, which includes their password, username, or email address. Conversely, the registration page allows new users to establish accounts by supplying the required data, which frequently consists of a distinct username, password, and email address. Combining these forms ensures user privacy and security and improves the website's user experience. They are essential to user authentication. They act as the cornerstone for fostering genuine interactions in the digital sphere and establishing user trust.
In this login form section we make two input field and four social media option to login easily. User can choose any option to login there account. New user can create a new account by clicking register button on the right side, this is very simple and user friendely interface.
Let's see the screenshot of the template for the registration and login form. Only the Login Form is visible there; however, when you click on Signup, the Signup form opens and the Login Form hides as the right side image effortlessly flips into the left side. This responsive login and registration form was created only using HTML and CSS; no JavaScript code was used in its construction. All of the HTML and CSS code that I used to create this form should be quite simple for you to grasp.
Responsive modern login form using html css
To make a Responsive modern login form using html css, you need to do the following steps in HTML and CSS. First, create a new folder and name it. Inside this folder, create two files: index.html and style.css.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>Modern Login Page</title>
</head>
<body>
<div class="container" id="container">
<div class="form-container sign-up">
<form>
<h1>Create Account</h1>
<div class="social-icons">
<a href="#" class="icon"><i
class="fa-brands fa-google-plus-g"></i></a>
<a href="#" class="icon"><i
class="fa-brands fa-facebook-f"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
<a href="#" class="icon"><i
class="fa-brands fa-linkedin-in"></i></a>
</div>
<span>or use your email for registeration</span>
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<button>Sign Up</button>
</form>
</div>
<div class="form-container sign-in">
<form>
<h1>Sign In</h1>
<div class="social-icons">
<a href="#" class="icon"><i
class="fa-brands fa-google-plus-g"></i></a>
<a href="#" class="icon"><i
class="fa-brands fa-facebook-f"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
<a href="#" class="icon"><i
class="fa-brands fa-linkedin-in"></i></a>
</div>
<span>or use your email & password</span>
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<a href="#">Forget Your Password?</a>
<button>Sign In</button>
</form>
</div>
<div class="toggle-container">
<div class="toggle">
<div class="toggle-panel toggle-left">
<h1>Welcome Back!</h1>
<p>Login your account</p>
<button class="hidden" id="login">Sign In</button>
</div>
<div class="toggle-panel toggle-right">
<h1>Hello, Friend!</h1>
<p>Register your new account</p>
<button class="hidden" id="register">Sign Up</button>
</div>
</div>
</div>
</div>
<script>
const container = document.getElementById('container');
const registerBtn = document.getElementById('register');
const loginBtn = document.getElementById('login');
registerBtn.addEventListener('click', () => {
container.classList.add("active");
});
loginBtn.addEventListener('click', () => {
container.classList.remove("active");
});
</script>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body {
background: linear-gradient(to right, #c2d0ff, #e9e5e5);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
}
.container {
background-color: #fff;
border-radius: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.container p {
font-size: 14px;
line-height: 20px;
letter-spacing: 0.3px;
margin: 20px 0;
}
.container span {
font-size: 12px;
}
.container a {
color: #333;
font-size: 13px;
text-decoration: none;
margin: 15px 0 10px;
}
.container button {
background-color: #2dc825;
color: #fff;
font-size: 12px;
padding: 10px 45px;
border: 1px solid transparent;
border-radius: 8px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-top: 10px;
cursor: pointer;
}
.container button.hidden {
background-color: transparent;
border-color: #fff;
}
.container form {
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
height: 100%;
}
.container input {
background-color: #eee;
border: none;
margin: 8px 0;
padding: 10px 15px;
font-size: 13px;
border-radius: 8px;
width: 100%;
outline: none;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in {
left: 0;
width: 50%;
z-index: 2;
}
.container.active .sign-in {
transform: translateX(100%);
}
.sign-up {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.active .sign-up {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: move 0.6s;
}
@keyframes move {
0%,
49.99% {
opacity: 0;
z-index: 1;
}
50%,
100% {
opacity: 1;
z-index: 5;
}
}
.social-icons {
margin: 20px 0;
}
.social-icons a {
border: 1px solid #ccc;
border-radius: 20%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 3px;
width: 40px;
height: 40px;
}
.social-icons .icon:hover {
background: #2dc825;
color: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35);
border: none;
transition: all ease 0.5s;
}
.toggle-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: all 0.6s ease-in-out;
border-radius: 150px 0 0 100px;
z-index: 1000;
}
.container.active .toggle-container {
transform: translateX(-100%);
border-radius: 0 150px 100px 0;
}
.toggle {
background-color: #2dc825;
height: 100%;
color: #fff;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: all 0.6s ease-in-out;
}
.container.active .toggle {
transform: translateX(50%);
}
.toggle-panel {
position: absolute;
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 30px;
text-align: center;
top: 0;
transform: translateX(0);
transition: all 0.6s ease-in-out;
}
.toggle-left {
transform: translateX(-200%);
}
.container.active .toggle-left {
transform: translateX(0);
}
.toggle-right {
right: 0;
transform: translateX(0);
}
.container.active .toggle-right {
transform: translateX(200%);
}