Simple Floating Label Animation using HTML & CSS

Simple Floating Label Animation using HTML & CSS

If you want to create simple floating-level animations using HTML and CSS then this tutorial is for you. Here you will find complete information and a step-by-step tutorial for creating a floating label using CSS.

Floating label input css can be found in different types of login forms, registration forms, etc. Where the label is floating. Usually, we use labels in the input box. This label helps to know what to input in an input box.

This label is at the top of the input box. The input box we created here contains the label input box. That is, the label has been placed in the place of the placeholders.

Floating Label Input CSS

Below is a demo that will help you learn how it works. I used HTML CSS and some jquery to make it.

See the Pen Untitled by Foolish Developer (@foolishdevweb) on CodePen.


I have created a small box on the webpage as you can see above. That box contains two inputs. There is no border around those input places. There is only a border at the bottom.

When you click in that input box, the label will move upwards. And input space will be created. In this Floating Label Animation design, I have used both label and placeholder. Under normal circumstances the label is visible and the placeholder is hidden.

When you click on the input box, the label will move slightly upwards and the placeholder will be visible. This type of Simple Floating Label Animation is much more interesting than a simple input box.

Create a Floating Label Input with HTML CSS

HTML's input function has been used to create a floating label using CSS. Below I have shared a step-by-step tutorial on how to create it. For this, you must have a basic idea about HTML CSS.

Step 1: Basic structure of input area

I have created the basic structure of this project using the following HTML and CSS codes. That means a box has been created on the webpage. You can see two input boxes in it.

<div class="container">

</div>

The webpage has been designed using the following CSS. Here I have used blue as the background color of the web page.

*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family:  sans-serif;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #40e0d0;
background: rgb(10, 164, 222);
color: #1d1f20;
}

Basic structure of input area

I have used the width: 330px, height: 250px of the box on that page, and light blue color has been used in the background of the box.

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

Step 2: Add two input boxes and a label

I have created two input boxes using the following HTML. The first input box to input the name and the second input box to input e-mail. I used HTML input to make each input box and I used a label with both.

<div class="input">
  <input type="text" id="name" class="inside-input" placeholder="Enter your name" />
  <label for="name">Name</label>
</div>


<div class="input">
  <input type="text" id="email" class="inside-input" placeholder="Enter your email" />
  <label for="email">Email</label>
</div>

Add two input boxes and a label

Step 3: Basic design of input box

I have used the following CSS to design the input boxes. Transparent color has been used in the background of this input box, that is, the background can be seen completely. 

Now I have managed to hide the border of the input box under normal conditions. A 2-pixel border can only be seen at the bottom instead of the border.

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

Basic design of input box

input.inside-input {
border: none;
border-bottom: 2px solid #333;
border-radius: 0;
}

Floating Label Animation

Step 4: Design the placeholder

The following CSS has been used to design the placeholder. Here I have used opacity: 0 which means that the placeholder cannot be seen under normal conditions. Then I used opacity: 1 using ': focus' which means when you click on this input box you will see the placeholder.

input::placeholder {
color: #333;
transition: opacity 0.2s ease-out;
opacity: 0;
}
input:focus::placeholder {
transition: opacity 0.2s 0.1s ease-out;
opacity: 1;
}

Design the placeholder

Step 5: Design the Floating Label by css

Now I have used the following code to design the label. I have used font-size: 1.3rem to increase the text size of this label.

label {
position: absolute;
pointer-events: none;
font-size: 1.3rem;
color: #333;
top: 10px;
left: 11px;
transition: all 0.2s ease-in-out;
}

Now I have executed the label. I have instructed that when you click on that input box then the following code will work. It is stated here that the label will go up to 28px and the text color will be red.

input.onFocus + label {
color: #ff0061;
font-size: 1.2rem;
top: -28px;
left: 10px;
font-weight: 700;
}


This is not possible without JavaScript, which means that the image I have shown below can be seen after using JavaScript. Without JavaScript, you can't see the results of the image below.

Design the Floating Label by css

Step 6: Activate floating label input

Above we have added the necessary information for Simple Floating Label Animation. We have designed it and now we have to use JQuery to make it work.

Two types of terms have been used here. What happens when you click on the input box and what happens when you click outside the input box.

➤ The first instruction is to add the 'onFocus' element when you click on that input box. I have added all the values ​​of 'onFocus' in CSS.

➤ I then instructed that the 'onFocus' element will be removed when you click anywhere other than the input.

$(".input input")
 .on("focus", function () {
   if (!$(this).hasClass("onFocus")) {
     $(this).addClass("onFocus");
   }
 })

 .on("blur", function () {
   if ($(this).val() === "" && $(this).hasClass("onFocus")) {
      $(this).removeClass("onFocus");
   }
 });

Activate floating label input

Hope you learned from the above tutorial how I created this floating label input CSS. Earlier I created various login forms, registration forms in which this type of Simple Floating Label CSS has been used. Use the button below to get the required source code for this Animated Floating Input Label.







Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

Simple Day Night Toggle Button Using HTML and CSS

Image
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha
Read more

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code: The following
Read more

Simple RGB Color Generator Using JavaScript & CSS

Image
In this article, you will learn how to create RGB Color Generator using JavaScript. Earlier I shared with you the project of different types of JavaScript color generators . Some projects create background colors, some gradient colors, and some generate random colors.  Using this simple RGB Color Generator you can manually generate RGB color . It is much more modern and professional than other color generators. Here you can mix different colors together and create gradients.  This JavaScript RGB Color Generator project has various control buttons. With the help of which you can create gradients by adding colors in different ways.  JavaScript RGB Color Generator Many times I use different applications or websites to create my gradient color . In that case, such a project will help you. You can get the required code of the color you have created from here. Which you can copy directly and use as CSS code. Below I have given a demo that will help you to know how this project (RGB Color
Read more