Tagged with:

Kitty Giraudel

Non-binary accessibility & diversity advocate, frontend developer, author. Real life cat. They/she.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 43

Comments are closed.
  1. Right Post came at the right time, I was just about to search for the same Login Forms. Now need to go anywhere else. Thanks A lot ! ๐Ÿ™‚

  2. Um รณtimo trabalho e de excelente bom gosto! Venho acompanhando a muito tempo os tutoriais e as dicas, รฉ de muito valor este seu trabalho, continue sempre … vlws

  3. I am feeling jealous about you guys,
    How do you get creativity to do all these things.
    Can you share the secret behind your creativity.
    I am feeling like a old school kid who only knows to finish his homework no matter of handwriting.

  4. Slight error in Example 4, in the Markup field.
    You start with and end with . Should end with … ๐Ÿ™‚ Great article though, good job bro ๐Ÿ™‚

  5. Great examples of creative login forms, I’ll use one of the designs this week on a project with some tweaks here and there. Keep the good stuff flowing!

  6. It just gets better..well i have been coming here for these stuffs … best ever blog ๐Ÿ™‚

  7. Love these, but they’re missing common things like “Forgot your password?” links that might throw off some people trying to develop something a bit more functional.

  8. very cool, very usefull, came at the right time,

    thanks for sharing such beautifull stuff !

  9. Super tutorial. I wonder why you use P as “line separator”. Should it be a div or li (in my opinion LI is not totally correct).

  10. Its so exiciting and informative.
    It inspire us to design like this and to think in different ways like you.
    Like it.

    Thanks for inspiring us..

  11. Hi, I would like to use your first login form but I would prefer the right arrow instead of this strange sign in the demo 1… anyone know how to change it ?

  12. In form-2, you are using .form-2 .float:last-of-type, which isn’t actually being applied

    After some research it seems type is the element type first, then matches the class and there are 3 p elements

  13. Well, the form 3 doesn’t work with IE 10, for some odd reason. Do you know why?

  14. I am using the example 1 in a class project and was wondering how to scale it down to view for mobile devices. i.e. tablets and phones. Would someone be able to help me with the CSS? It would be much appreciated!! Thank you in advance!!

  15. i like form in demo 1 and want to use. but that piece of code
    *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;

    crash all aother borders of site.How can it be use localy