Back to Top
The nuts and bolts for
Creative web development

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.

Read the full article

Share this Article