In today’s digital age, a user’s first interaction with a website is often through the login page. Making this experience visually appealing, functional, and accessible is crucial. In this blog post, we will design a login form with a modern UI, enriched with focus-enhancing animations, and built entirely using HTML and CSS. By the end of the article, you will have a login page that is both user-friendly and SEO-compliant.
Why Is Design Important in Login Forms?
A well-designed login form:
- Enhances user experience.
- Boosts professionalism and trust.
- Aligns with your brand’s aesthetics.
- Can increase user engagement.
Our login form features a minimal yet attractive design enriched with effective focus animations and hover effects.
Code: Build Your Login Form
Here is the complete HTML and CSS code for the modern login form.
HTML and Javascript Code:
<!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="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css"
integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&family=Ultra&display=swap" rel="stylesheet">
<title>Login Form</title>
</head>
<body>
<div
class="container main-area d-flex align-items-center justify-content-center p-4 gap-2 mx-5 position-relative"
>
<div class="flex-column align-items-center justify-content-center position-absolute loader-area">
<div class="loader"></div>
<span class="animate__animated animate__bounceInRight ">Please Wait</span>
<span class="animate__animated animate__bounceInRight animate__delay-1s">Entering the System</span>
</div>
<div class="left-area d-flex flex-column align-items-center position-relative ">
<div class="d-flex flex-column align-items-center gap-3 ">
<img src="as.png" width="100" alt="" />
<span class="signup mt-4" >SIGN UP</span>
<h1 class="text-white m-0 ">Welcome!</h1>
<p class="gray-text text-center m-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem,
debitis!
</p>
</div>
<form action="" class="d-flex flex-column w-100 gap-3 pt-4">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
</form>
<div class="d-flex gap-2 align-items-center justify-content-center w-100 pt-3">
<div class="socials">
<i class="fa-brands fa-google"></i>
</div>
<div class="socials">
<i class="fa-brands fa-x-twitter"></i>
</div>
<div class="socials">
<i class="fa-brands fa-apple"></i>
</div>
<div class="socials">
<i class="fa-brands fa-discord"></i>
</div>
</div>
<div class="w-100 pt-3">
<span class="or">OR</span>
</div>
<div class="d-flex flex-column gap-3 w-100 pt-3">
<div class="otherlogin">
<img width="32" height="32" src="https://img.icons8.com/clouds/100/linkedin.png" alt="linkedin"/>
Login with Linkedin
</div>
<div class="otherlogin">
<img width="32" height="32" src="https://img.icons8.com/clouds/100/github.png" alt="github"/>
Login with Github
</div>
</div>
<div class="position-absolute bottom-0 w-100 d-flex justify-content-between bottom-part">
<a href="">Privacy Policy</a>
<a href="">Terms & Conditions</a>
</div>
</div>
<div class=" right-area"></div>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<script>
const btn = document.querySelector(".signup");
const loaderArea = document.querySelector(".loader-area");
const leftArea = document.querySelector(".left-area");
const rightArea = document.querySelector(".right-area");
btn.addEventListener("click", () => {
loaderArea.style.display = "flex";
loaderArea.style.opacity = "1";
leftArea.classList.add("remove");
rightArea.style.backgroundPosition = "Bottom";
rightArea.style.opacity = ".6";
});
</script>
</body>
</html>
CSS Code:
:root{
--color1: #87cda6;
--color2: #b9e5c0;
--color3: #488c73;
--color4: #5a5a5a;
}
body{
background: rgb(23,25,24);
background: linear-gradient(118deg, rgba(23,25,24,1) 0%, rgba(16,45,43,1) 100%);
font-family: "Rubik", serif !important;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: black;
}
.gray-text{
color: var(--color4);
}
.main-area{
border-radius: 15px;
height: 800px;
background: rgb(22,22,22);
background: linear-gradient(118deg, rgba(22,22,22,1) 0%, rgba(23,23,23,1) 100%);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
}
.right-area{
flex: 5;
border-radius: 15px;
background-image: url('1.png');
background-size: cover;
height: 100%;
width: 100%;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
}
.left-area{
padding:2rem 3rem 3rem 3rem;
transition: .4s all ease;
flex: 2;
border-radius: 15px;
background: rgb(46,60,46);
background: linear-gradient(180deg, rgba(32, 39, 32,1) 0%, rgba(22,24,23,1) 100%);
height: 100%;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
-webkit-transition: .4s all ease;
-moz-transition: .4s all ease;
-ms-transition: .4s all ease;
-o-transition: .4s all ease;
}
.signup{
cursor: pointer;
color: white;
font-weight: 500;
background-color: var(--color3);
padding: 5px 15px;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
transition: .4s all ease ;
-webkit-transition: .4s all ease ;
-moz-transition: .4s all ease ;
-ms-transition: .4s all ease ;
-o-transition: .4s all ease ;
}
.signup:hover{
background-color: #42c076;
}
input{
font-size: .8rem;
padding: 10px 13px;
border-radius: 5px;
border: 1px solid rgba(54, 54, 54, 1);
background-color: transparent;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
transition: .3s all ease;
-webkit-transition: .3s all ease;
-moz-transition: .3s all ease;
-ms-transition: .3s all ease;
-o-transition: .3s all ease;
outline: none;
color: var(--color3);
}
input::placeholder{
font-size: .9rem;
}
input:focus{
border: 1px solid var(--color3);
}
.socials{
cursor: pointer;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
padding: 15px;
background-color: #1f2322;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
transition: .4s all ease;
-webkit-transition: .4s all ease;
-moz-transition: .4s all ease;
-ms-transition: .4s all ease;
-o-transition: .4s all ease;
}
.socials:hover{
background-color: var(--color3);
}
.socials i{
color: white;
}
.or{
font-weight: 500;
color: var(--color4);
text-align: center;
}
.or::before{
margin-left: 0px;
margin-right: 10px;
margin-bottom: 3px;
}
.or::after{
margin-right: 0px;
margin-left: 10px;
margin-bottom: 3px;
}
.or::before, .or::after{
content: "";
display: inline-block;
height: 1px;
width: calc(50% - 30px) ;
background-color: var(--color4);
}
.otherlogin{
display: flex ;
align-items: center;
gap: 10px;
font-size: .8rem;
background-color: #1f2322;
color: rgb(170, 170, 170);
padding: 10px 15px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
transition: .4s all ease;
-webkit-transition: .4s all ease;
-moz-transition: .4s all ease;
-ms-transition: .4s all ease;
-o-transition: .4s all ease;
}
.otherlogin:hover{
cursor: pointer;
color: white;
background-color: var(--color3);
}
.bottom-part a{
padding: 20px;
font-size: .7rem;
text-decoration: none;
color: var(--color4);
transition: .4s all ease;
-webkit-transition: .4s all ease;
-moz-transition: .4s all ease;
-ms-transition: .4s all ease;
-o-transition: .4s all ease;
}
.bottom-part a:hover{
color: var(--color3);
}
.loader {
width: 80px;
aspect-ratio: 1;
display: grid;
border: 4px solid #0000;
border-radius: 50%;
border-right-color: #25b09b;
animation: l15 1s infinite linear;
}
.loader::before,
.loader::after {
content: "";
grid-area: 1/1;
margin: 2px;
border: inherit;
border-radius: 50%;
animation: l15 2s infinite;
}
.loader::after {
margin: 8px;
animation-duration: 3s;
}
@keyframes l15{
100%{transform: rotate(1turn)}
}
.loader-area{
opacity: 0;
z-index: 10;
display: none;
}
.loader-area span{
color: white;
font-size: 2rem;
}
.remove{
flex: 0 !important;
width: 0 !important;
opacity: 0 !important;
padding: 0 !important;
transition: .5s all ease;
-webkit-transition: .5s all ease;
-moz-transition: .5s all ease;
-ms-transition: .5s all ease;
-o-transition: .5s all ease;
}