Input Animations with HTML and CSS | Input Label Animation

In this video I go over how to create this input animation using only HTML and CSS. I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then write all of the styling and effects with CSS. I use CSS grid for the layout and then I add hover effects and transitions.

In this video I show you:
0:00 - Intro
0:27 - HTML Code
1:31 - CSS Code
6:49 - Input Animation

--

Gear

--

Let's Connect

--

DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!

[juresrovin]

I’m terrified of css. Instead of watching horror movies I watch videos like this where it takes 80 lines of css to implement “simple” input field animation. Props to the instructor 👏🏻.

[DarkSolidity]

So I added this design to my project and it looks amazing!! I also added form invalidation events, the borders now display in red when the user has an invalid input. It’s so clean, compact and responsive!

[cbennder]

Best solution from all "float label" videos on YouTube. Thank you.😊

[DarkSolidity]

This is design looks so clean! When adding invalidation to this it will look so responsive.

[foupax]

The other Day I was filling a form with exactly this kind of animation. And now you provide a way to achieve this. That's Great. 👏👏👏

[mahesharya]

I was looking for these kind of input style for past 2-3 months and i was tired of jquery solutions. This has really helped me a lot. thanks a ton

[ke]

Congrat on passing the 10000 subscribers mark, I definitely need to learn Sass.

[Aayush-yrdf]

Thanks a lot, it's extremely helpful, I didn't knew that we could achieve such kind of animation by just using CSS . Without using any Javascript You showed how to achieve it.

[mingirc]

Thank you so much. Perfectly explained, mind-blowing and sure concise. I am so glad to came across with your video. I will be sure about subscribing your channel.

[daysinSunnyJune]

very good stuff Angela! Thanks for the great explanation!

[greykor]

Absolutely an amazing video! Super helpful! Thank you so much for making this!

[kalyankumar]

THat was really helpful, One thing I spotted is ---> don't you think form__input:not(:focus) is a redundant check, I think just using
would do!!

[tomaszklekner]

Hi Angela

This is an amazing tutorial, thank you very much for your work. You got yourself a new subscriber :D

I think I can optimise one CSS selector:

~ .form__label

This way you drop the .form__input class duplication and I think it still works as expected :)

[HorbachenkoVlad]

This is fuk*ng awesome) I was looking for such a solution for my input but your variant is even better than I wanted it to be)

[josue-cedeno]

Perfect! I was just working on this idea. Thank you!

[antons]

Fantastic solution to one of the most common mistakes people make with forms. You use placeholders instead of labels because it simply looks better. The problem is that from a UX perspective, that is a mistake because the placeholder disappears when you click on the input. This way you can have both the looks and experience :)

[MRCNRAJPUTGAMERS]

Thank u for being a great human being and taking ti to help all of us noobs out cheers

[salmanfarshisajib]

You can use background transparent instead of background none. Very helpful video❤

[manitarai]

What a detailed and clear explanation! I loved it

[ompatel]

Woah mam, you are at another level u know elements and their uses