Interesting Takes on Log in / Sign Up Forms

Log in forms are often just two fields: username and password. Sign up forms are often scarcely much more, perhaps asking for an email address as well and a repeated password.

These two types of forms are often tied at the hip. The links to get to them are often right next to each other. They often are styled similarly. And this makes sense… functionally, they are also often tied at the hip. An attempted sign up from an existing user might just log them in. A failed log in might suggest signing up. Social buttons might also work both ways.

All that to say, these forms don’t have to be boring! Designers have been taking the opportunity to do clever and interesting things with these forms.

Let’s gawk at some awesome ones.

Ian Hazelton’s Color Changing Field Sliders

The unused form fields sliding away is a nice transition, but the color change really locks in the idea that it is a different form with different functionality.


Live demo & code

Tommaso Poletti’s Shuffling Cards

I might argue it’s not entirely clear that “Log In” button is going to shuffle the forms for you, but I love the interaction and how you can see unused form underneath.


Live demo & code

Nikolay Talanov’s Slide Across the Canal

What looks like an innocent button that will take you to the page you actually need instead initiates a some major sliding action that reveals the new form. Most satisfying is how you can watch the image knockout slide by.


Live demo & code

Mohan Khadka’s Flippy Form

No JavaScript whatsoever here. The flipping effect is of course CSS 3D transforms, but even the toggling between forms isn’t a class name change, but a hidden input combining labels, checkboxes, and the sibling ~ combinator.


Live demo & code

Josh Sorosky Slide’n’Zoom

This one has a similar feel, only slides instead of flips. There are nice subtleties too, like an intuitive-feeling checkbox and how the background changes zoom level a little bit when changing between the two.


Live demo & code

Jamie Coulter’s Flop Down Authenticator

Speaking of 3D transforms, this login form hits the deck (literally) while it is logging you in.


Live demo & code

Anna Batura’s Slider

There are so many nice subtleties in this slider, like the moving background and how the form fields are sliding in a different direction than the white form area itself. Plus an interesting success state!


Live demo & code

Riccardo Pasianotto’s Push-Through Fields

Hardly takes up any space at all when you’re using that Z axis!


Live demo & code

About the Author Chris is a web designer and developer. He writes about all things web at CSS-Tricks, talks about all things web at conferences around the world and on his podcast ShopTalk, and co-founded the web coding playground CodePen. More by this Author