Create an Elegant HTML5 Login Form With Toggle Animation

5 Feb , 2014  HTML & CSS,jQuery 

This tutorial teaches us on how to create an elegant HTML5 login form with jQuery toggle animation when the user clicks on the “Log in” button. We create a beautiful HTML5 CSS3 login form which toggles with sliding animation.

HTML5 and CSS3 are two coding standards being accepted on a large scale nowadays. These two are used to enhance the web user experience to the next level. These two are also used to bring out elegance and beauty to your design. Today, we are going to use these two techniques to create a beautiful form with toggle animation enabled for it. We had previously seen articles on search form collections, and a simple registration form with validation which were using HTML5 and CSS3. Don’t forget to add the jQuery plugin to your HTML page.

Elegant HTML5 Login Form With jQuery Toggle Animation

Before we proceed, you can check out the demo and download of the full source code from the below link:

DEMO | DOWNLOAD

We will see the HTML, CSS and the small bit of jQuery involved now.

HTML:

CSS3:

jQuery for toggle:

Explanation:

We create a login button to click. Then we add a form to the HTML, which has the heading for the login form, then the username field, password field and the submit button. The target for toggling is the login button at the top, this is named as “toggle-login”. We have also added a small triangle, something like a tooltip using CSS3 to imitate that the login form is being toggled from the button.

This triangle has only one side border set and all other sides the border is transparent. Hence this tutorial works only on browsers which support these properties.

We have also added HTML5 placeholder properties for the input fields in the form. For password field and the username field. The best part is when the login form toggles on a click on the login button. We have used

to toggle the form with slide toggle animation.

DEMO | DOWNLOAD

Hope you enjoyed this tutorial. If you have any doubts or issues please let us know by commenting.



, , , , ,

  • Facebook User

    Clean html5 tutorial