Hello everyone, you can learn how to create a Awesome Input Animation using HTML & CSS in this blog. So if you want to learn then follow all the steps carefully.
Watch Full Tutorial on YouTube
Source Code Of Awesome Input Animation
Step 1: Create Index.html File
Create one file with the name index.html and paste the below code in this file.
<!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">
<link rel="stylesheet" href="style.css">
<title>Input Animation</title>
</head>
<body>
<div class="container">
<div class="inputs">
<input type="text" required>
<label>Username</label>
</div>
<div class="inputs">
<input type="password" required>
<label>Password</label>
</div>
</div>
</body>
</html>Step 2: Create style.css File
Create one file with the name style.css and paste the below code in this file.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: rgb(255, 236, 69);
}
.container{
width:400px ;
background: white;
padding: 30px;
border-radius: 10px;
}
.container .inputs{
height: 40px;
width: 100%;
position: relative;
margin-bottom: 30px;
}
.container .inputs input{
width: 100%;
height: 40px;
border: none;
border-bottom: 2px solid gray;
outline: none;
font-size: 16px;
transition: 0.3s;
}
.container .inputs input:focus{
border-color: crimson;
}
.container .inputs label{
position: absolute;
bottom: 10px;
left: 0;
pointer-events: none;
font-size: 16px;
transition: 0.3s;
}
.container .inputs input:focus ~ label,
.container .inputs input:valid ~ label{
transform: translateY(-23px);
color: crimson;
}That's It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.
