Floating Label Pattern with CSS and jQuery

The idea of float label pattern is based on a Dribbble Shot by Matt D Smith. This is mainly used to minimize the form space and transition look of labels. There are lots of plugins developed by many developers but I am introducing a simple and best way how to use Floating Label Pattern with jquery and css. This is easy to load your page should not take much time to load. So it is fast and seo friendly.

You can check the demo:

Add jquery library to your page first. you can download it from here

This is my demo html






Now add this style to your css and change according to your requirement


And finally add the jquery code to you page as below:

Thats all for now. I will be back with new coding and property.


You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *