Floating Label Animation using HTML CSS (Free Code)
Tags: html, webdev, tutorial, beginners
Published: 2022-03-10 18:21:08

If you want to know how to create Floating Label Animation then this tutorial will help you. Here I have shared the information on how to add **Floating Label** in the input box. Earlier I shared another tutorial where I added Floating Label in the login form.

Here I have shown how to create css Floating Label input box using HTML and CSS. Here I have used some amount of jquery. The input box we all use. Basically login form, registration form is the most used input. 

✅✅ **Live Preview**  👉👉 [Floating Label Animation](https://www.groundtutorial.com/2022/03/floating-label-input-css.html)

Labels are used in input boxes to create input box identities. When you click on the input box, the Label will move slightly upwards and the placehold will be visible.

## HTML of the Floating Label input box

We have added the information required to create this [Floating Label Animation](https://www.groundtutorial.com/2022/03/floating-label-input-css.html) using the following HTML code. Here I have used two input boxes. 

The first input box to input the username and the second input box email id. Placeholds and labels are used in each input box.

```html
<!--Basic area of the project-->
 <div class="container">
<!--Place to input the name-->
    <div class="input">
      <input type="text" id="name" class="inside-input" placeholder="Enter your name" />
      <label for="name">Name</label>
    </div>
<!--Place to input the email-->
    <div class="input">
      <input type="text" id="email" class="inside-input" placeholder="Enter your email" />
      <label for="email">Email</label>
    </div>

  </div>
```
## Floating Label Animation CSS

First I did the basic design of the webpage and used the background color. Then I designed Basic Area which will have two input boxes. 

The width of that area: 330px,`height: 250px`. Boxes depend on `width: 100%` and size padding. When you click on the input box, the label will move slightly upwards and the placehold will be visible.
```css
 *,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family:  sans-serif;
}
/* Basic design of webpage */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #40e0d0;
background: rgb(10, 164, 222);
color: #1d1f20;
}
/*Design of the basic structure of the project*/
.container {
display: flex;
justify-content: center;
flex-direction: column;
margin: 1rem auto;
background: rgba(255, 255, 255, 0.75);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
border-radius: 10px;
width: 330px;
height: 250px;
padding: 0 2rem 0 2rem;
border-radius: 5px;
text-align: center;
}
/* Design the places to input */
.input {
max-width: 300px;
position: relative;
}
.input:nth-child(1){
  margin-bottom: 50px;
}
input {
background-color: transparent;
position: relative;
border: 2px solid #333;
font-size: 1.1rem;
width: 100%;
padding: 10px 6px;
border-radius: 5px;
font-weight: 400;
outline: none;
transition: all 0.2s ease-in-out;
}
input.inside-input {
border: none;
border-bottom: 2px solid #333;
border-radius: 0;
}
/* The placeholder in the input box has been designed */
/*Arrangements have been made to hide the placeholder. For that I have used 'opacity: 0'.*/
input::placeholder {
color: #333;
transition: opacity 0.2s ease-out;
opacity: 0;
}
/* Placehold will be visible when you click in the input box. */
input:focus::placeholder {
transition: opacity 0.2s 0.1s ease-out;
opacity: 1;
}
/* The following code has helped to design the label */
label {
position: absolute;
pointer-events: none;
font-size: 1.3rem;
color: #333;
top: 10px;
left: 11px;
transition: all 0.2s ease-in-out;
}
/* When the input box is clicked, the label will move slightly upwards. */
input.onFocus + label {
color: #ff0061;
font-size: 1.2rem;
top: -28px;
left: 10px;
font-weight: 700;
}
```
## Activate Floating Label with Jquery

Above we have added the required information to create this **Floating Label Animation**. Now it needs to be implemented using some amount of jQuery.
```javascript
  $(".input input")
//The 'onFocus' class will be added when you click on the input box.
    .on("focus", function () {
      if (!$(this).hasClass("onFocus")) {
        $(this).addClass("onFocus");
      }
    })
//The 'onFocus' class will be removed when you click elsewhere.
    .on("blur", function () {
      if ($(this).val() === "" && $(this).hasClass("onFocus")) {
        $(this).removeClass("onFocus");
      }
    });
```
Hopefully you have been able to create floating level input boxes using the above codes. 

Earlier I shared a tutorial on [Login Form with Floating Label](https://www.foolishdeveloper.com/2022/02/login-form-with-floating-label.html). If you want the code of **Floating Label Animation css** then use the link below.

✅✅ **Download Source Code**  👉👉 [Floating label input box](https://www.groundtutorial.com/2022/03/floating-label-input-css.html)