Hey There welome to codingayush.com. In this post we are going to create a beautiful login form with animation using HTML, CSS only and also free source code is provided below. So if you haven't joined our telegram then join fast link is Join telegram https://t.me/codingayush for free notes and source codes.
This popup login form will be triggered by clicking on a button. So it will be hidden first when the user clicks on the button then the login form will animate. You can check the preview below.
Preview
In this beautiful Login Form using HTML, Css I used only css to create it this is the best way to create a login form without JavaScript.
If you are in search of a Animated Login Form then this project will help you. So What are you waiting for let's start building this beautiful Login Form
HTML
Your <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Popup Form Design By Coding Ayush</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
</head>
<body>
<div class="center">
<input type="checkbox" id="show" />
<label for="show" class="show-btn">View Form</label>
<div class="container">
<label for="show" class="close-btn fas fa-times" title="close"></label>
<div class="text">Login Form</div>
<form action="#">
<div class="data">
<label>Email or Phone</label>
<input type="text" required />
</div>
<div class="data">
<label>Password</label>
<input type="password" required />
</div>
<div class="forgot-pass">
<a href="#">Forgot Password?</a>
</div>
<div class="btn">
<div class="inner"></div>
<button type="submit">login</button>
</div>
<div class="signup-link">
Not a member? <a href="#">Signup now</a>
</div>
</form>
</div>
</div>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
width: 100%;
background: #11131e;
display: flex;
align-items: center;
justify-content: center;
}
.show-btn {
background: #fff;
padding: 10px 20px;
font-size: 20px;
font-weight: 500;
color: #3498db;
cursor: pointer;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
transition: all 0.1s ease;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container {
transform-origin: center;
}
.show-btn:active {
scale: 0.9;
}
input[type="checkbox"] {
display: none;
}
.container {
scale: 0;
opacity: 0;
z-index: -1;
background: #fff;
width: 410px;
padding: 30px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
#show:checked ~ .container {
scale: 1;
opacity: 1;
z-index: 11;
}
.container .close-btn {
position: absolute;
right: 20px;
top: 15px;
font-size: 18px;
cursor: pointer;
}
.container .close-btn:hover {
color: #3498db;
}
.container .text {
font-size: 35px;
font-weight: 600;
text-align: center;
}
.container form {
margin-top: -20px;
transition: all 0.3s ease;
}
.container form .data {
height: 45px;
width: 100%;
margin: 40px 0;
}
form .data label {
font-size: 18px;
}
form .data input {
height: 100%;
width: 100%;
padding-left: 10px;
font-size: 17px;
border: 1px solid silver;
}
form .data input:focus {
border-color: #3498db;
border-bottom-width: 2px;
}
form .forgot-pass {
margin-top: -8px;
}
form .forgot-pass a {
color: #3498db;
text-decoration: none;
}
form .forgot-pass a:hover {
text-decoration: underline;
}
form .btn {
margin: 30px 0;
height: 45px;
width: 100%;
position: relative;
overflow: hidden;
}
form .btn .inner {
height: 100%;
width: 300%;
position: absolute;
left: -100%;
z-index: -1;
transition: all 0.4s;
}
form .btn:hover .inner {
left: 0;
}
form .btn button {
height: 100%;
width: 100%;
background: none;
border: none;
color: #fff;
background: #11131e;
font-size: 18px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
border-radius: 8px;
overflow: hidden;
}
form .signup-link {
text-align: center;
}
form .signup-link a {
color: #3498db;
text-decoration: none;
}
form .signup-link a:hover {
text-decoration: underline;
}