Awesome Input Animation using HTML & CSS | Floating Label Animation
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 it 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.
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 talks 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 it 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 the following codes into your file. You can also download the source code files through the given link. Click here to download source code files.
You might like this:
Responsive Contact us Form
Glowing Social Media Buttons
Animated Login & Signup Form
Digital Clock with Glowing Effect
Originally published at https://www.codingnepalweb.com on July 3, 2020.
