Floating Label Animation using HTML CSS (Free Code)

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

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 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.

<!--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.

 *,
*::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.

  $(".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. If you want the code of Floating Label Animation css then use the link below.

✅✅ Download Source Code 👉👉 Floating label input box