Hey, developers welcome to Day-2 of our 90Days 90Projects challenge. And in Day-2 we are going to create an Animated Login form using HTML and CSS.
In this Project when a user starts typing on the input area then the area will change its color.
So to run this code you just need to copy the HTML and CSS code and run it into your code Editor.
Preview
.png "animated login form html css, animated login form codepen, animated login form codepen, animated login form with source code, animated login form css")
HTML Code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<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 </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="form-container">
<h2 class="login-title"> Login </h2>
<input type="text" name="text" class="userName" placeholder="username">
<input type="password" name="password" class="userPassword" placeholder="password">
<button class="loginBtn"> Login </button>
</div>
<!-- Animated Login form using HTML and CSS by raju_webdev [Geeks Help] -->
</body>
</html>
CSS Code
style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
.form-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: black;
color: white;
width: 25rem;
border-radius: 10px;
padding: 5em 2rem;
box-shadow: 0px 0px 20px 0px black;
border: 1px solid black;
}
.login-title {
font-size: 2rem;
margin-bottom: 2rem;
}
.userName,
.userPassword {
text-align: center;
border: 2px solid cyan;
margin: 1rem;
color: white;
background: transparent;
padding: 1rem 2rem;
border-radius: 3rem;
width: 15rem;
font-size: 1.2rem;
outline: none;
transition: all .2s ease-in-out;
}
.userName:focus,
.userPassword:focus {
width: 20rem;
animation-name: colorChange;
animation-duration: 10s;
animation-iteration-count: infinite;
}
@keyframes colorChange {
0% {
border-color: green;
color: green;
}
10% {
border-color: yellow;
color: yellow;
}
20% {
border-color: hotpink;
color: hotpink;
}
30% {
border-color: red;
color: red;
}
40% {
border-color: purple;
color: purple;
}
50% {
border-color: yellow;
color: yellow;
}
60% {
border-color: cyan;
color: cyan;
}
70% {
border-color: skyblue;
color: skyblue;
}
80% {
border-color: pink;
color: pink;
}
90% {
border-color: red;
color: red;
}
100% {
border-color: yellow;
color: yellow;
}
}
.loginBtn {
background: transparent;
border: 2px solid green;
padding: 1rem 3rem;
border-radius: 6rem;
text-decoration: underline;
font-size: 1rem;
color: white;
cursor: pointer;
transition: all .3s ease-in-out;
}
.loginBtn:hover {
background: green;
border: 2px solid green;
}
Great, I started yesterday this 90 days of coding challenge, I'm trying to become a full stack developer
ReplyDeletewow amazing man 🤩We wish all the best in your journey
DeleteWow, superb projects bhai👏, i am also becoming a frontend developer , this projects are very useful for beginner and intermediate level Developer like me, should i just type code given in source code, or should i try to make this projects by my own ?, Please guide me 🙏
ReplyDeleteThank you so much brother glad to know that these projects are helpful for you 😊 I want to inform you that take an inspiration from this projects and then try to build it on your own and if you face any issue then come back to this page and check what you are missing and how you can re-build it. I hope this will help you in your frontend journey 🤗
DeleteThanks for uploading awesome projects
ReplyDeleteyou're welcome 😊
DeleteThanks for uploading project nice work
ReplyDeleteThank you so much i have looking for projects like these before but was not able to find any. But now i can practice the front end part from this thankyou so much brother appriciate it.
ReplyDeleteI want to become a full stack developer can you help me to learn more and more?
ReplyDeletepls add in react JS notes
ReplyDelete