Awesome Input Animation using HTML & CSS

Hello readers, Today in this blog you'll learn how to create an Awesome Input Animation or Floating Label Animation using only HTML & CSS. Earlier I have shared a blog on how to create Popup Login Form Design in HTML & CSS. And now I'm going to create an Input Animation.

As you have seen on many websites, when you click on the input field to enter some info there is an awesome floating label animation. A floating label is a text label that appears inside the input field at full font-size. When interacted with, the label “floats” above, making space or room for the user to input value or log in details.

Today I'll share with you this program (Floating Label Animation or Input Animation). In this program, there is an input animation also that means when you click on the input field there is a smooth border animation that starts from the center and expands to the left and right side.

If you're feeling difficulty to understand what I am saying. You can watch a full video tutorial on this program (Floating Label Animation or Input Animation).

Video Tutorial of Floating Label Animation or Input Animation



In the video, you have seen Input Animation with Floating Label Animation. I hope you like this program. If you're a beginner and you know HTML & CSS then you can also create this type of animation and use on your websites and projects. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

You might like this:


Floating Label Animation or Input Animation [Source Codes]

As always, before sharing the codes of this program (Floating Label Animation or Input Animation). Let's a few talk about the main tags and codes of this program. In the HTML File, first I created a <div> with the class name "wrapper" and I created another <div> inside it. The inside "input-data" <div> I created a <input>, <div class="underline">, and <label> tags.

In the CSS File, first I placed all elements at the center. Then I removed the default border and background of input. After that, I created a 2px solid border on the bottom and placed the label on the top of the input. Then using :focus and :valid selector I changed the position of the label on focus. Remember that, :valid selector only works when you put the required attribute in the input tag. Then I created a 2px height border and added a transition to make it smooth. After creating this border, I have hidden this and only show when the user focuses on the input field.

To create this program (Floating Label Animation or Input Animation). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file. You can also download the source code files through the given link. Click here to download source code files.

HTML FILE:

CSS FILE:


Thanks for visiting, Keep visiting.


Post a Comment

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Previous Post Next Post
CodingNepal
Subscribe our YouTube Channel