4.5K
Animated material login form design
Welcome to you in techmidpoint tutorial. I am hoping you will like the material design login form. In this tutorial, I am going to create an animated material login form design using HTML, CSS, and JavaScript. Just copy the given source code and paste it into your text editor and run it. First, you need the avatar image that image you can easily download from google. Another wave image you can create using photoshop.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Animated Login Form</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link
href="https://fonts.googleapis.com/css?family=Poppins:600&display=swap"
rel="stylesheet"
/>
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<img class="wave" src="img/wave.png" />
<div class="container">
<div class="img"></div>
<div class="login-content">
<form action="index.html">
<img src="img/avatar.svg" />
<h2 class="title">Yahoo!!</h2>
<div class="input-div one">
<div class="i">
<i class="fas fa-user"></i>
</div>
<div class="div">
<h5>Email or Username</h5>
<input type="text" class="input" />
</div>
</div>
<div class="input-div pass">
<div class="i">
<i class="fas fa-lock"></i>
</div>
<div class="div">
<h5>Password</h5>
<input type="password" class="input" />
</div>
</div>
<a href="#">Forgot Password?</a>
<input type="submit" class="btn" value="Login" />
</form>
</div>
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
overflow: hidden;
background:linear-gradient(#333880,#eb233e);
}
.wave {
position: fixed;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
}
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 7rem;
padding: 0 2rem;
}
.img {
display: flex;
justify-content: flex-end;
align-items: center;
}
.login-content {
display: flex;
justify-content: flex-start;
align-items: center;
text-align: center;
}
.img img {
width: 500px;
}
form {
width: 360px;
}
.login-content img {
height: 100px;
}
.login-content h2 {
margin: 15px 0;
color: #fff;
text-transform: uppercase;
font-size: 2.9rem;
}
.login-content .input-div {
position: relative;
display: grid;
grid-template-columns: 7% 93%;
margin: 25px 0;
padding: 5px 0;
border-bottom: 2px solid #d9d9d9;
}
.login-content .input-div.one {
margin-top: 0;
}
.i {
color: #d9d9d9;
display: flex;
justify-content: center;
align-items: center;
}
.i i {
transition: 0.3s;
}
.input-div > div {
position: relative;
height: 45px;
}
.input-div > div > h5 {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 18px;
transition: 0.3s;
}
.input-div:before,
.input-div:after {
content: "";
position: absolute;
bottom: -2px;
width: 0%;
height: 2px;
background-color: coral;
transition: 0.4s;
}
.input-div:before {
right: 50%;
}
.input-div:after {
left: 50%;
}
.input-div.focus:before,
.input-div.focus:after {
width: 50%;
}
.input-div.focus > div > h5 {
top: -5px;
font-size: 15px;
}
.input-div.focus > .i > i {
color: coral;
}
.input-div > div > input {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
background: none;
padding: 0.5rem 0.7rem;
font-size: 1.2rem;
color: #98c0d6;
font-family: "poppins", sans-serif;
}
.input-div.pass {
margin-bottom: 4px;
}
a {
display: block;
text-align: right;
text-decoration: none;
color: #999;
font-size: 0.9rem;
transition: 0.3s;
}
a:hover {
color: coral;
}
.btn {
display: block;
width: 100%;
height: 50px;
border-radius: 25px;
outline: none;
border: none;
background-image: linear-gradient(to right, #e88747, coral, #e88747);
background-size: 200%;
font-size: 1.2rem;
color: #fff;
font-family: "Poppins", sans-serif;
text-transform: uppercase;
margin: 1rem 0;
cursor: pointer;
transition: 0.5s;
}
.btn:hover {
background-position: right;
}
@media screen and (max-width: 1050px) {
.container {
grid-gap: 5rem;
}
}
@media screen and (max-width: 1000px) {
form {
width: 290px;
}
.login-content h2 {
font-size: 2.4rem;
margin: 8px 0;
}
.img img {
width: 400px;
}
}
@media screen and (max-width: 900px) {
.container {
grid-template-columns: 1fr;
}
.img {
display: none;
}
.wave {
display: none;
}
.login-content {
justify-content: center;
}
}
JavaScript
const inputs = document.querySelectorAll(".input");
function addClass() {
let parent = this.parentNode.parentNode;
parent.classList.add("focus");
}
function removeClass() {
let parent = this.parentNode.parentNode;
if (this.value == "") {
parent.classList.remove("focus");
}
}
inputs.forEach((input) => {
input.addEventListener("focus", addClass);
input.addEventListener("blur", removeClass);
});
Download Source Code
For More Tutorials Please Click Here
