- Home
- Web Designing
- Responsive Login Form Using H ...
Responsive Login Form Using HTML,CSS & JavaScript
In this post, we’re creating a clean and responsive login form using HTML, CSS, and JavaScript. This login form is designed to securely collect user credentials such as email address and password, making it ideal for any authentication system or user login page. It features a modern UI layout, a show/hide password toggle using JavaScript, and supports social login buttons like Google and Facebook. The form is fully mobile-responsive, ensuring a smooth login experience on both desktop and mobile devices. Perfect for developers building a secure and user-friendly sign-in page, this login form is simple to integrate and customize.
This modern login form is designed using HTML, CSS, and JavaScript, offering a sleek and responsive user interface. It includes email and password input fields, a show/hide password feature powered by JavaScript, and helpful links like “Forgot Password“. The form also supports Google and Facebook login buttons for quick social authentication. Styled with a clean UI and fully mobile-friendly layout, it’s perfect for eCommerce platforms, admin dashboards, or any user login system. Easy to integrate and customize, this login form enhances both functionality and user experience.
More Login and Registration Page
This post also provides the full source code so you can copy, edit, and use it in your own project. Feel free to experiment with the design, colors, fonts, or layout to match your website’s branding. A great-looking login form is a small detail that can make a big difference in your site’s professional look and user trust.
Here The Steps to Create Responsive Modern Login Form:
1. Set up your HTML structure
Start by creating a basic HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css">
</head>
<body>
<div class="container">
<div class="registration-wrapper">
<div class="registration-content-wrap">
<h1>Simplify <br>Management with our <span>dashboard</span></h1>
<p>Simplify your e-commerce management with our user-friendly admin dashboard.</p>
<img decoding="async" src="images/male-female.png" alt="">
</div>
<div class="registration-form-wrap">
<h1>Welcome Back</h1>
<p class="rfw-top">Plaese login to your account</p>
<div class="registration-form">
<input type="email" placeholder="Email Address">
<div class="password-input">
<input type="password" placeholder="Enter Your Password">
<i class="ri-eye-line" id="ShowPassowrd-btn"></i>
</div>
</div>
<a href="#" class="forgot-pass">Forgot Password?</a>
<button class="btn">Login</button>
<div class="span">Or Login with</div>
<div class="register-option">
<div class="option-box">
<img decoding="async" src="images/google-logo.png" alt="google-logo">
Google
</div>
<div class="option-box">
<img decoding="async" src="images/facebook-logo.png" alt="facebook-logo">
Facebook
</div>
</div>
<p class="signup">Dont's have an account? <a href="#">Signup</a></p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js" defer data-deferred="1"></script> <script src="script.js" defer data-deferred="1"></script> <script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script></body>
</html>
2. Add CSS for styling
@import url('https://fonts.googleapis.com/css2?family=Nova+Script&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
scroll-behavior: smooth;
font-family: 'poppins';
}
:root{
--primary-color: #FF8036;
--section-bg-color: #2D2638;
--body-color:#7a748e;
--black-color:#000;
--white-color:#fff;
--OpenSans:"Open Sans", sans-serif;
--Nova:"Nova Script", system-ui;
--transition-regular:.3s;
--transition-slow:.6s;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: var(--white-color);
}
.container{
background-color: var(--white-color);
box-shadow: 0px 10px 80px rgba(131, 131, 131, 0.5);
width: 100%;
height: 600px;
max-width: 1100px;
padding: 1.5% 3%;
padding-left: 2%;
border-radius: 50px;
}
.registration-wrapper{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 50px;
}
.registration-content-wrap{
width: 50%;
height: 550px;
position: relative;
display: flex;
flex-direction: column;
padding: 5%;
background-color: var(--primary-color);
border-radius: 50px;
position: relative;
overflow: hidden;
z-index: 1;
}
.registration-content-wrap h1{
font-family: var(--OpenSans);
font-size: 2.5rem;
line-height: 3rem;
font-weight: 600;
color: var(--white-color);
}
.registration-content-wrap h1 span{
position: relative;
font-weight: 500 !important;
}
.registration-content-wrap span:after{
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 5px;
background-color: var(--white-color);
border-radius: 100%;
}
.registration-content-wrap p{
font-size: 14px;
margin-top: 20px;
color: var(--white-color);
}
.registration-content-wrap:after{
content: '';
position: absolute;
top: 85%;
left: 82%;
transform: translate(-50%, -50%);
width: 350px;
height: 350px;
border-radius: 100%;
background-color: var(--white-color);
filter: blur(150px);
z-index: -1;
}
.registration-content-wrap img{
width: 75%;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.registration-form-wrap{
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
}
.registration-form-wrap h1{
font-size: 2.5rem;
color: var(--black-color);
font-family: var(--OpenSans);
font-weight: 600;
}
.registration-form-wrap p{
color: #525252;
}
.rfw-top{
margin:5px 0;
}
.registration-form{
width: 100%;
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 30px;
}
.registration-form input{
width: 100%;
height: 50px;
padding-left: 5%;
background-color: #f3f3f3;
outline: none;
border:1px solid transparent;
border-radius: 15px;
font-size: 17px;
box-shadow: 0 0 10px rgba(205, 203, 203, 0.5);
transition: var(--transition-regular);
&::placeholder{
color: var(--body-color);
}
}
.registration-form input:active,
.registration-form input:focus{
border: 1px solid var(--body-color);
color: var(--black-color);
&::placeholder{
color: var(--black-color);
}
}
.registration-form input:hover{
border: 1px solid var(--body-color);
color: var(--black-color);
}
.forgot-pass{
font-size: 17px;
color: var(--body-color);
text-align: right;
margin: 5px 0;
width: 100%;
}
.password-input{
position: relative;
}
.password-input i{
position: absolute;
top: 50%;
left: 94%;
transform: translate(-50%, -50%);
color: var(--body-color);
font-size: 1.3rem;
transition: var(--transition-regular);
}
.password-input i:hover{
color: var(--white-color);
cursor: pointer;
}
.btn{
width: 100%;
height: 50px;
background-color: var(--primary-color);
font-size: 1.2rem;
color: var(--white-color);
border: none;
border-radius: 15px;
margin: 10px 0;
transition: var(--transition-regular);
}
.btn:hover{
background-color: #ff6e1a;
cursor: pointer;
}
.span{
text-align: center;
margin: 10px 0;
color: var(--body-color);
position: relative;
width: 100%;
}
.span:after{
content: '';
position: absolute;
top: 50%;
left: 0%;
width: 36%;
height: 1px;
background-color: var(--body-color);
}
.span:before{
content: '';
position: absolute;
top: 50%;
right: 0;
width: 36%;
height: 1px;
background-color: var(--body-color);
}
.register-option{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-top: 10px;
}
.option-box{
width: 50%;
padding: 10px 0;
border-radius:15px;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
border: 1px solid var(--body-color);
font-size: 1.3rem;
font-family: var(--OpenSans);
color: var(--black-color);
transition: var(--transition-regular);
}
.option-box img{
width: 30px;
height: 30px;
object-fit: contain;
}
.option-box:hover{
border: 1px solid var(--primary-color);
cursor: pointer;
}
.signup{
margin-top: 20px;
}
.signup a{
color: var(--primary-color);
text-decoration: underline;
font-weight: 600;
}
/* MQ Section */
@media (max-width:900px) {
body{
height: 100%;
}
.registration-wrapper{
flex-direction: column-reverse;
}
.registration-content-wrap{
width: 100%;
}
.registration-content-wrap h1{
font-size: 2.8rem;
}
.registration-content-wrap p{
font-size: 18px;
}
.registration-content-wrap img{
width: 60%;
}
.container{
padding: 30px;
height: 100%;
max-width: 700px;
}
.registration-form-wrap{
width: 100%;
}
.terms{
margin: 25px 0;
}
}
@media (max-width:500px) {
.registration-top{
flex-direction: column;
}
.registration-content-wrap img {
width: 85%;
}
.container{
border-radius: 0;
}
}
3. Add JavaScript for interactivity
let ShowPassowrdbtn = document.querySelector('#ShowPassowrd-btn');
let input = document.querySelector("input[type='password']")
ShowPassowrdbtn.addEventListener('click' , function () {
if(input.type == 'password') {
input.type = 'text'
ShowPassowrdbtn.setAttribute('class' , 'ri-eye-off-line')
}
else {
input.type = 'password'
ShowPassowrdbtn.setAttribute('class' , 'ri-eye-line')
}
})
Watch More Tutorial On Youtube
HTML CSS login form
login form with icons
modern login form
responsive login form mobile friendly login form
simple login form Design responsive Login Form
