Intro
Hello, guys today I am very excited because today I create an Animated Login Page Design using HTML and pure CSS only not using any type of library. It is very difficult if you are a beginner in coding. I also provide a Complete source code free of cost. If you are a beginner in coding and programming so check out this Simple Login Page Design.
What is Animated login page design?
An animated login page is a design for a login page that includes animation elements. This can include things like moving graphics, transition effects, or other types of animation that are designed to add visual interest and engagement to the login process. The use of animation can help to make the login page more interactive and engaging for users, potentially making the process of logging in more enjoyable and easier to complete.
Animated Login Form / Login Page Using HTML CSS
In this Design i create a very beautiful animation in Login Page border as you can see in top image it is very difficult to make this animation if you are a beginner in coding HTML and CSS. First make same simple Login page then make this one.
There are two input fields in this design first one for Username and other one for Password two links for forgate Password and Sign Up and in the last very beautiful Login button. When user click on the input fields text field will be available with very beautiful animation.
About Animated Login Page Design HTML CSS
| Created By | Coding Pakistan |
| Category | Login Page Design |
| Source Code | Available |
| Languages | HTML and CSS |
| Demo | Click here to view Demo |
How to Create a Animated Login Page Using HTML CSS
Please follow these steps to create this type of Login page design using HTML and CSS only.
- Create a two files one is for HTML and another one for CSS. You can also write CSS in HTML file user style tag but i created a separate file for CSS coding.
- Link CSS file with HTML file.
- Add Dark Back ground Color.
- Create Heading “Sign In”, input fields, buttons and some text in HTML file.
- Then go to CSS file and write CSS for HTML elements and customize elements as you want.
Follow these five steps to create Animated login form If you don’t understand these steps so watch this given video. I also provide a video tutorials for my audience to watch and understand easily. But i have one request to you if you are interested in coding and programming and you are related to this categories so please subscribe my YouTube Channel.
Video Tutorial [How to make Animated Login Page Using HTML CSS]
You might like this:
- Netflix Clone Using HTML CSS
- Transparent Login Form Using HTML CSS
- Login Form Using HTML CSS
- Simple Login Page in 5 Minutes
Source Code of Animated Login Page Design Using HTML CSS
As you know i also provide a source code of my all projects with audience for free of cost so here is the source code of this Animated Login Page design. Copy the given code and paste in your file.
First you need to Create one file for HTML and copy the given code and paste it into your file make sure your HTML file is in (.html) extension.
HTML FILE
<!DOCTYPE html> <html lang="en"> <head> <!-- Created by www.codingpakistan.com --> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animated Login Form HTML CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box"> <div class="form"> <h2>Sign in</h2> <div class="inputbox"> <input type="text" required> <span>Username</span> <i></i> </div> <div class="inputbox"> <input type="password" required> <span>Password</span> <i></i> </div> <div class="links"> <a href="#"> Forgate Password</a> <a href="#"> Sing Up</a> </div> <input type="submit" value="Login"> </div> </div> </body> </html>
Then create a CSS file and copy the given code and paste it into your CSS file make sure your file with correct format (.css) other wise code is not working properly.
CSS FILE
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: rgb(24, 23, 23);
}
.box{
position: relative;
width: 380px;
height: 420px;
background: #1c1c1c;
border-radius: 8px;
overflow: hidden;
}
.box::before{
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
background: linear-gradient(0deg, transparent, #45f3ff,
#45f3ff);
transform-origin: bottom right;
animation: animate 6s linear infinite;
}
.box::after{
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
background: linear-gradient(0deg, transparent, #45f3ff,
#45f3ff);
transform-origin: bottom right;
animation: animate 6s linear infinite;
animation-delay: -3s;
}
@keyframes animate
{
0%
{
transform: rotate(0deg);
}
100%
{
transform: rotate(360deg);
}
}
.form{
position: absolute;
inset: 2px;
border-radius: 8px;
background: #28292d;
z-index: 10;
padding: 50px 40px;
display: flex;
flex-direction: column;
}
.form h2{
color: #45f3ff;
font-weight: 500;
text-align: center;
letter-spacing: 0.1em;
}
.inputbox{
position: relative;
width: 300px;
margin-top: 35px;
}
.inputbox input{
position: relative;
width: 100%;
padding: 20px 10px 10px;
background: transparent;
border: none;
outline: #23242a;
font-size: 1em;
letter-spacing: 0.05em;
z-index: 10;
}
.inputbox span{
position: absolute;
left: 0;
padding: 20px 10px 10px;
font-size: 1em;
color: #8f8f8f;
pointer-events: none;
letter-spacing: 0.05em;
transition: 0.5s;
}
.inputbox input:valid ~ span,
.inputbox input:focus ~ span
{
color: #45f3ff;
transform: translateX(-10px) translateY(-34px);
font-size: 0.75em;
}
.inputbox i{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #45f3ff;
border-radius: 4px;
transition: 0.5s;
pointer-events: none;
z-index: 9;
}
.inputbox input:valid ~ i,
.inputbox input:focus ~ i{
height: 44px;
}
.links{
display: flex;
justify-content: space-between;
}
.links a{
margin: 10px 0;
font-size: 0.75em;
color: #8f8f8f;
text-decoration: none;
}
.links a:hover,
.links a:nth-child(2)
{
color: #45f3ff;
}
input[type = "submit"]
{
border: none;
outline: none;
background: #45f3ff;
padding: 11px 25px;
width: 100px;
margin-top: 10px;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
}
CSS OUTPUT
You see the final Output in this given image
Download Source Code Animated Login Page HTML .
If your code is not working correctly and you face any type of issue so click the download button zip file is automatically downloaded first you need to extract this file and use it according to your need.
If you have any questions about this please ask in the comments section I will answer as soon as possible. Thanks 🥰