Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Input Label Animation in HTML and CSS
In this article, we will create Basic Input Label Animation using HTML and CSS. We will create the structure of the Input Label with the help of HTML and design that HTML structure with the help of CSS.
What is Input Label Animation?
Input Label Animation which we are going to create in this article. When the user clicks on the Input Field to type, the Input Label Name goes on the border of the Input Field. Which looks quite cool. You can see it in the image given below.
Approach to Create Input Label Animation
To create Input Label Animation, we will create two files.
HTML Code for Structure
In this file, we will prepare the basic structure of HTML. We will use the div tag, input tag, label tag, etc. You can see this in the example given below.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Input Label Animation</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<div class="input-container">
<input type="text" id="name" placeholder=" " required>
<label for="name">Your Name</label>
</div>
</body>
</html>
CSS Code for Styling
In this file, we have used the basic properties of CSS. The CSS file is linked in the head selection of HTML. You can see the CSS code in the example given below.
CSS Code
* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.input-container {
position: relative;
width: 250px;
}
input {
width: 100%;
padding: 10px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 5px;
outline: none;
}
input:focus {
border-color: #4a90e2;
}
label {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
color: #888;
font-size: 16px;
pointer-events: none;
transition: 0.3s ease all;
}
/* Animation for focused input */
input:focus + label,
input:not(:placeholder-shown) + label {
top: 0;
left: 10px;
font-size: 12px;
color: #4a90e2;
background-color: #f0f0f0;
padding: 0 5px;
}
Complete Code of Input Label Animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Input Label Animation</title>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.input-container {
position: relative;
width: 250px;
}
input {
width: 100%;
padding: 10px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 5px;
outline: none;
}
input:focus {
border-color: #4a90e2;
}
label {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
color: #888;
font-size: 16px;
pointer-events: none;
transition: 0.3s ease all;
}
/* Animation for focused input */
input:focus+label,
input:not(:placeholder-shown)+label {
top: 0;
left: 10px;
font-size: 12px;
color: #4a90e2;
background-color: #f0f0f0;
padding: 0 5px;
}
</style>
</head>
<body>
<div class="input-container">
<input type="text" id="name" placeholder=" " required>
<label for="name">Your Name</label>
</div>
</body>
</html>
Output
As you can see, we have created a basic Input Label Animation by using HTML and CSS.
321 Views
