CSS Animated Login Form Design.Today in this blog , we gonna learn about CSS Animated Login Form Design.
CSS Animated Login Form Design
Hi Friends!
Today in this blog, we gonna learn about CSS Animated Login Form Design. While Creating a website account then you can see the Login Forms. I already uploaded some Login Forms if you're a beginner let's go and learn it.
This Animated Login Form Design is nice to see on websites. In the previous blog, we will learn about CSS Animated Social Media Icons if you're a beginner I will recommend learning that Social Media Icons effect first. If you learn that and this blog will help you to learn about Animated Login Form Design. In this blog, I will give my video tutorial and source codes to download. if you have any doubts ask me in the comment section.
HTML file
[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css animated login page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<form>
<h1>Login</h1>
<div class="username">
<input type="text" placeholder="Username">
</div>
<div class="password">
<input type="password" placeholder="Password">
</div>
<div class="icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-google"></i>
</div>
<input type="submit" class="submit">
</form>
</body>
</html>
]
You can copy this HTML file. and paste it into your HTML file. Now you will learn it clearly. and don't forget to save the file with an extension. HTML. This extension is more important for creating a website page.
CSS file
[
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background-color: #262626FF;
}
form{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
height: 500px;
width: 400px;
font-family: sans-serif;
color: white;
border-radius: 20px;
box-shadow: 1px 1px 60px black;
cursor: pointer;
}
h1{
position: absolute;
top: 5%;
left: 30%;
padding: 5px;
font-size: 35px;
letter-spacing: 1px;
text-shadow: 1px 1px 40px black;
border-bottom: 5px solid dodgerblue;
}
.username,.password{
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin: 20px;
height: 50px;
width: 90%;
font-size: 25px;
letter-spacing: 2px;
overflow: hidden;
}
.icons{
display: flex;
justify-content: space-evenly;
align-items: center;
position: relative;
height: 50px;
width: 90%;
top: 20px;
font-size: 20px;
}
i{
display: block;
background-color: white;
color: black;
padding: 10px;
transition: 0.5s;
border-radius: 50%;
}
.submit{
display: block;
position: relative;
outline: none;
border: none;
top: 80px;
padding: 10px 20px;
background-color: white;
color: black;
transition: 0.5s;
font-size: 20px;
font-weight: bold;
border-radius: 10px;
cursor: pointer;
}
input[type='text'],[type='password']{
display: block;
outline: none;
background: none;
border: none;
color: white;
font-size: 20px;
}
.username::after{
content: 'Username';
display: flex;
justify-content: flex-start;
align-items: center;
position: absolute;
height: 50px;
width: 90%;
left: 0;
background-color: #262626FF;
padding: 5px 10px;
transition: 1s;
border-left: 5px solid dodgerblue;
}
.password::after{
content: 'Password';
display: flex;
justify-content: flex-start;
align-items: center;
position: absolute;
height: 50px;
width: 90%;
left: 0;
background-color: #262626FF;
padding: 5px 10px;
transition: 1s;
border-left: 5px solid dodgerblue;
}
div:hover::after{
transform: translateX(99%);
}
input[type='text']:focus{
transition: 0.5s;
border-bottom: 5px solid dodgerblue;
}
input[type='password']:focus{
transition: 0.5s;
border-bottom: 5px solid dodgerblue;
}
i:hover{
transform: translateY(-10px);
background-color: dodgerblue;
color: white;
box-shadow: 1px 1px 40px dodgerblue;
}
.submit:hover{
background-color: dodgerblue;
color: white;
box-shadow: 1px 1px 40px dodgerblue;
}
]
Secondly, you can copy this CSS file. and paste it into your CSS file. and remember the file extension called. CSS. This will help you to design your webpage. If you want more clarity on this topic you can watch my video tutorial and If you have any doubts ask me in the comment section.
Video Tutorial
Watch this video fully and learn all Login Form Designs for developing your own Login Form Designs. repeat the code for your practice this will help you to learn this Animated Login Form Design effectively and This video is also helpful to learn faster. colourful Animated Login Form Design Effects are an important part of websites. I hope this tutorial will be helpful for learning Login Form Design. I will give you Source Code and you can download it.
COMMENTS