Custom Login Form Styling

Create login forms using interesting CSS techniques and HTML5 goodness

Nowadays, almost every web service, application, game etc. allows (or even requires) user subscription, which means they all need some kind of form for users to register and sign in. With this in mind, Hugo Giraudel tried to create a few different login forms, some of which are inspired by design concepts on the web. The aim was to give some particularity to each of them.


As Hugo Giraudel said earlier, he tried to make every form different from the others with its own particularity. This one relies on its submit button, kind of “out of the screen”, and rounded. Okay, so this first example is pretty minimal, meaning he won’t use any labels. But, he of course needs to tell his users what they have to write in those fields, so he use … icons. Those are the little <i/> tags. Basically, Hugo Giraudel has two containers wrapping an input and an icon. The submit button is in its own container, and he uses a <button/> instead of an <input/> with an icon inside. He will also employ placeholders to make things even more clear for supported browsers.


Be the first to write a comment

You must me logged in to write a comment.