75+ CSS Login Forms

A hand-picked collection of top free HTML and CSS login form examples. These visually appealing and functional login forms are the best choice for web developers and designers when creating form components for websites and apps.

Each login form is unique and stylish, with a wide range of options that comes with mesmerising colour schemes. Our login forms are sourced from top sites like CodePen and GitHub and easily fit with your brand’s theme, are highly customizable and easy to implement in your projects.

Let’s explore our comprehensive collection of 75+ CSS login forms and create customized and visually appealing login interfaces that enhance the user experience.

1. Animated Form

See the Pen <a href="https://codepen.io/frontendmax/pen/RazXVb"> Animated Form</a> by Max Konoval (<a href="https://codepen.io/frontendmax">@frontendmax</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Maxim Konoval
Source: Code / Demo
Created on: MAY 21, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

2. Tumblr Login/Signup CSS Toggle

See the Pen <a href="https://codepen.io/billyysea/pen/DbQyQE"> Tumblr Login/Signup CSS Toggle</a> by Billy (<a href="https://codepen.io/billyysea">@billyysea</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Billy
Source: Code / Demo
Created on: DECEMBER 2, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

3. Login Box Concept

See the Pen <a href="https://codepen.io/jcoulterdesign/pen/azepmX"> Login Box Concept</a> by Jamie Coulter (<a href="https://codepen.io/jcoulterdesign">@jcoulterdesign</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jamie Coulter
Source: Code / Demo
Created on: APRIL 14, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS), JavaScript

4. Sign Up

See the Pen <a href="https://codepen.io/supah/pen/gPZyYP"> Daily UI #001: Sign Up</a> by Fabio Ottaviani (<a href="https://codepen.io/supah">@supah</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Fabio Ottaviani
Source: Code / Demo
Created on: FEBRUARY 12, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

5. Login Form

See the Pen <a href="https://codepen.io/dervondenbergen/pen/ALOeBL"> Login Form 1</a> by Felix De Montis (<a href="https://codepen.io/dervondenbergen">@dervondenbergen</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Felix De Montis
Source: Code / Demo
Created on: AUGUST 16, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

6. Login Form

See the Pen <a href="https://codepen.io/linux/pen/LLVaqx"> Log In Form CSS 2017</a> by Omar Dsooky (<a href="https://codepen.io/linux">@linux</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Omar Dsoky
Source: Code / Demo
Created on: JUNE 7, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

7. Animated Login Form

See the Pen <a href="https://codepen.io/boudra/pen/YXzLBN"> Animated login form</a> by Mohamed Boudra (<a href="https://codepen.io/boudra">@boudra</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mohamed Boudra
Source: Code / Demo
Created on: APRIL 23, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

8. Toggle Login/Register Form

See the Pen <a href="https://codepen.io/agrimsrud/pen/nVvmmw"> Toggle Login/Register Form</a> by Anders Grimsrud (<a href="https://codepen.io/agrimsrud">@agrimsrud</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Anders Grimsrud
Source: Code / Demo
Created on: JANUARY 15, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

9. Login Form

See the Pen <a href="https://codepen.io/miketricking/pen/BjyPPv"> login form day 001 from the 100 days UI</a> by Mike Young (<a href="https://codepen.io/miketricking">@miketricking</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mike Young
Source: Code / Demo
Created on: DECEMBER 8, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

10. Glassmorphism Login

See the Pen <a href="https://codepen.io/hicoders/pen/eYdwVmb"> Glassmorphism Login</a> by HiCoders (<a href="https://codepen.io/hicoders">@hicoders</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: HiCoders
Source: Code / Demo
Created on: JANUARY 25, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

11. Web Chat Layout Login Page

See the Pen <a href="https://codepen.io/B99-AHMAD/pen/ExZeypj"> Web Chat Layout (Non responsive) | Layout de Web Chat ( Não responsível)</a> by AHMAD (<a href="https://codepen.io/B99-AHMAD">@B99-AHMAD</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: AHMAD
Source: Code / Demo
Created on: APRIL 19, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

12. Polanquette login screen

See the Pen <a href="https://codepen.io/governorfancypants/pen/WNQpxE"> polanquette login screen</a> by Tobias Johansson (<a href="https://codepen.io/governorfancypants">@governorfancypants</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tobias Johansson
Source: Code / Demo
Created on: MARCH 28, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

13. Login Form – Modal

See the Pen <a href="https://codepen.io/andytran/pen/GpyKLM"> Login Form – Modal</a> by Andy Tran (<a href="https://codepen.io/andytran">@andytran</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andy Tran
Source: Code / Demo
Created on: OCTOBER 19, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript

14. Flickering Login

See the Pen <a href="https://codepen.io/aecend/pen/JoLzqr"> Flickering Login</a> by Jeff Thomas (<a href="https://codepen.io/aecend">@aecend</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jeff Thomas
Source: Code / Demo
Created on: FEBRUARY 20, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

15. Login Password Mask

See the Pen <a href="https://codepen.io/TylerK/pen/gOexXj"> Login Password Mask</a> by Tyler Kelley (<a href="https://codepen.io/TylerK">@TylerK</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tyler Kelley
Source: Code / Demo
Created on: AUGUST 5, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Stylus), Javascript

16. Simple Login Widget

See the Pen <a href="https://codepen.io/lexeckhart/pen/RPLPwX"> Simple Login Widget</a> by Alexander Eckhart (<a href="https://codepen.io/lexeckhart">@lexeckhart</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alexander Eckhart
Source: Code / Demo
Created on: JUNE 18, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less)

17. My client login area

See the Pen <a href="https://codepen.io/jcoulterdesign/pen/QjJbKx"> My client login area</a> by Jamie Coulter (<a href="https://codepen.io/jcoulterdesign">@jcoulterdesign</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jamie Coulter
Source: Code / Demo
Created on: NOVEMBER 10, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS), JavaScript

18. Double slider Sign in/up Form

See the Pen <a href="https://codepen.io/Rh2o/pen/yLgxJoG"> Weekly Coding Challenge #1 – Double slider Sign in/up Form – Desktop Only</a> by RH2O (<a href="https://codepen.io/Rh2o">@Rh2o</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: RH2O
Source: Code / Demo
Created on: APRIL 19, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

19. Sign In Button and Form

See the Pen <a href="https://codepen.io/colewaldrip/pen/MKmKEJ"> Sign In Button and Form</a> by Cole Waldrip (<a href="https://codepen.io/colewaldrip">@colewaldrip</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Cole Waldrip
Source: Code / Demo
Created on: JANUARY 8, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

20. Css Login Form

See the Pen <a href="https://codepen.io/juliodonoso/pen/AbpxEm"> Css Login Form</a> by julio donoso (<a href="https://codepen.io/juliodonoso">@juliodonoso</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: julio donoso
Source: Code / Demo
Created on: MARCH 14, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

21. Random Login Form

See the Pen <a href="https://codepen.io/motorlatitude/pen/abNzbY"> Random Login Form</a> by Lennart Hase (<a href="https://codepen.io/motorlatitude">@motorlatitude</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Lennart Hase
Source: Code / Demo
Created on: APRIL 12, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

22. Angular Login Form Directive

See the Pen <a href="https://codepen.io/hartzis/pen/LEPXam"> Angular Login Form Directive</a> by Brian Emil Hartz (<a href="https://codepen.io/hartzis">@hartzis</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Brian Emil Hartz
Source: Code / Demo
Created on: NOVEMBER 11, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Stylus), JavaScript

23. Log in Form Connect with Facebook

See the Pen <a href="https://codepen.io/berdejitendra/pen/kPyvVZ"> Log in Form </a> by Jitendra (<a href="https://codepen.io/berdejitendra">@berdejitendra</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jitendra
Source: Code / Demo
Created on: NOVEMBER 21, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

24. Material Login Form

See the Pen <a href="https://codepen.io/andytran/pen/RPBdgM"> Material Login Form</a> by Andy Tran (<a href="https://codepen.io/andytran">@andytran</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andy Tran
Source: Code / Demo
Created on: JULY 20, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript

25. CSS Facebook Login Page

See the Pen <a href="https://codepen.io/amit0009/pen/ZEaygxa"> facebook login page</a> by Amit (<a href="https://codepen.io/amit0009">@amit0009</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Amit
Source: Code / Demo
Created on: FEBRUARY 12, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

26. Popup Login & Signup with jQuery

See the Pen <a href="https://codepen.io/monkeytempal/pen/VvKLMe"> Popup Login & Signup with jQuery</a> by Bijay Pakhrin (<a href="https://codepen.io/monkeytempal">@monkeytempal</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Bijay Pakhrin
Source: Code / Demo
Created on: SEPTEMBER 23, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

27. Login modal

See the Pen <a href="https://codepen.io/knyttneve/pen/dgoWyE"> login modal</a> by Mert Cukuren (<a href="https://codepen.io/knyttneve">@knyttneve</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mert Cukuren
Source: Code / Demo
Created on: OCTOBER 1, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(Babel)

28. Bootstrap Snippet: Login Form

See the Pen <a href="https://codepen.io/ace-subido/pen/nLgWyj"> Bootstrap Snippet: Login Form</a> by Ace Subido (<a href="https://codepen.io/ace-subido">@ace-subido</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ace Subido
Source: Code / Demo
Created on: NOVEMBER 15, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

29. Login to Everdwell

See the Pen <a href="https://codepen.io/kman/pen/PoKgbP"> Login to Everdwell</a> by Kaushalya R. Mandaliya (<a href="https://codepen.io/kman">@kman</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kaushalya R. Mandaliya
Source: Code / Demo
Created on: JUNE 26, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

30. Responsive Login/Signup Modal Window

See the Pen <a href="https://codepen.io/codyhouse/pen/QWpVKB"> Responsive Login/Signup Modal Window</a> by CodyHouse (<a href="https://codepen.io/codyhouse">@codyhouse</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: CodyHouse
Source: Code / Demo
Created on: MAY 30, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

31. Login Form with Facebook

See the Pen <a href="https://codepen.io/vikasverma93/pen/qBKKBR"> Login, Register form</a> by Vikas Verma (<a href="https://codepen.io/vikasverma93">@vikasverma93</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Vikas Verma
Source: Code / Demo
Created on: AUGUST 22, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

32. The prismatic forms

See the Pen <a href="https://codepen.io/nourabusoud/pen/BxJbjJ"> The prismatic forms </a> by Nour Saud (<a href="https://codepen.io/nourabusoud">@nourabusoud</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nour Saud
Source: Code / Demo
Created on: MAY 8, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

33. Clean login form

See the Pen <a href="https://codepen.io/petertoth/pen/qBPwBY"> Clean login form</a> by Peter Tóth (<a href="https://codepen.io/petertoth">@petertoth</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Peter Tóth
Source: Code / Demo
Created on: JULY 5, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

34. Login and Signup Form HTML5 CSS3

See the Pen <a href="https://codepen.io/GeBuOr/pen/mJJmgx"> Login/Sign-In</a> by Genert Org (<a href="https://codepen.io/GeBuOr">@GeBuOr</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Genert Org
Source: Code / Demo
Created on: APRIL 30, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

35. 3D Login Form Concept

See the Pen <a href="https://codepen.io/jenning/pen/RVRYeb"> 3D login form concept</a> by Jenning (<a href="https://codepen.io/jenning">@jenning</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jenning
Source: Code / Demo
Created on: APRIL 23, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Sass), JavaScript

36. Unfolding Login Form

See the Pen <a href="https://codepen.io/hans/pen/bGpWXm"> Unfolding Login Form</a> by Hans Engebretsen (<a href="https://codepen.io/hans">@hans</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hans Engebretsen
Source: Code / Demo
Created on: APRIL 15, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

37. Login

See the Pen <a href="https://codepen.io/marcobiedermann/pen/DRWWVx"> Login</a> by Marco Biedermann (<a href="https://codepen.io/marcobiedermann">@marcobiedermann</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Marco Biedermann

Source: Code / Demo
Created on: JANUARY 10, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(PostCSS)

38. Pure CSS3 Login Form

See the Pen <a href="https://codepen.io/danzawadzki/pen/EgqKRr"> Pure CSS3 Login Form</a> by Daniel Zawadzki (<a href="https://codepen.io/danzawadzki">@danzawadzki</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Daniel Zawadzki
Source: Code / Demo
Created on: NOVEMBER 1, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

39. Login Form

See the Pen <a href="https://codepen.io/frytyler/pen/nJYVEO"> Login Form</a> by Tyler Fry (<a href="https://codepen.io/frytyler">@frytyler</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tyler Fry
Source: Code / Demo
Created on: JANUARY 31, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

40. Login Form

See the Pen <a href="https://codepen.io/banik/pen/dgQvWO"> Login Form</a> by Tony Banik (<a href="https://codepen.io/banik">@banik</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tony Banik
Source: Code / Demo
Created on: OCTOBER 24, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

41. Concept Material Login Form

See the Pen <a href="https://codepen.io/ibrahimozturkme/pen/pbaRoY"> Concept Material Login Form</a> by İbrahim ÖZTÜRK (<a href="https://codepen.io/ibrahimozturkme">@ibrahimozturkme</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: İbrahim ÖZTÜRK
Source: Code / Demo
Created on: JULY 18, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

42. Neumorphism Login Form

See the Pen <a href="https://codepen.io/ricardoolivaalonso/pen/YzyaRPN"> Neumorphism Login Form</a> by Ricardo Oliva Alonso (<a href="https://codepen.io/ricardoolivaalonso">@ricardoolivaalonso</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ricardo Oliva Alonso
Source: Code / Demo
Created on: MAY 9, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript

43. Bananaplate Login Panel

See the Pen <a href="https://codepen.io/iamnbutler/pen/nqvYYW"> Bananaplate Login Panel</a> by Nate Butler (<a href="https://codepen.io/iamnbutler">@iamnbutler</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nate Butler
Source: Code / Demo
Created on: JANUARY 7, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

44. Wavy login form

See the Pen <a href="https://codepen.io/Ariefrahmany/pen/OJWobPJ"> Wavy login form</a> by Arief Rahman Yusniardi (<a href="https://codepen.io/Ariefrahmany">@Ariefrahmany</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Arief Rahman Yusniardi
Source: Code / Demo
Created on: APRIL 19, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

45. Material Design Login Form

See the Pen <a href="https://codepen.io/isac/pen/wMEepP"> Material Design Login Form</a> by Isac Fadoni (<a href="https://codepen.io/isac">@isac</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Isac Fadoni
Source: Code / Demo
Created on: FEBRUARY 4, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

46. Calm breeze login screen

See the Pen <a href="https://codepen.io/Lewitje/pen/BNNJjo"> Calm breeze login screen</a> by Lewi Hussey (<a href="https://codepen.io/Lewitje">@Lewitje</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Lewi Hussey
Source: Code / Demo
Created on: MAY 1, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less), JavaScript

47. Absolute Center Login Page with Bootstrap

See the Pen <a href="https://codepen.io/OldManJava/pen/nexjVy"> Absolute Center Login Page with Bootstrap</a> by Tony Galati (<a href="https://codepen.io/OldManJava">@OldManJava</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tony Galati
Source: Code / Demo
Created on: DECEMBER 22, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

48. Monotone Admin Login CSS

See the Pen <a href="https://codepen.io/krips_zala/pen/PjwLJe"> Monotone Admin Login (inspired)</a> by Kripalsinh Zala (<a href="https://codepen.io/krips_zala">@krips_zala</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kripalsinh Zala
Source: Code / Demo
Created on: JUNE 6, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

49. Simple Login Placeholder Transition

See the Pen <a href="https://codepen.io/masonfox/pen/EVovQE"> Simple Login Placeholder Transition</a> by Mason Fox (<a href="https://codepen.io/masonfox">@masonfox</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mason Fox
Source: Code / Demo
Created on: OCTOBER 20, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

50. Flat Login Form 3.0

See the Pen <a href="https://codepen.io/andytran/pen/PwoQgO"> Flat Login Form 3.0</a> by Andy Tran (<a href="https://codepen.io/andytran">@andytran</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andy Tran
Source: Code / Demo
Created on: NOVEMBER 15, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript

51. Simple registration form

See the Pen <a href="https://codepen.io/bertdida/pen/XxZjNy"> Simple registration form</a> by bertdida (<a href="https://codepen.io/bertdida">@bertdida</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: bertdida
Source: Code / Demo
Created on: OCTOBER 17, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

52. Animated Login Form

See the Pen <a href="https://codepen.io/code_dependant/pen/nrdVjV"> Animated Login Form</a> by Che (<a href="https://codepen.io/code_dependant">@code_dependant</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Che
Source: Code / Demo
Created on: SEPTEMBER 18, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Sass), JS(CoffeeScript)

53. Login Form

See the Pen <a href="https://codepen.io/marcobiedermann/pen/DKaaBa"> Login Form</a> by Marco Biedermann (<a href="https://codepen.io/marcobiedermann">@marcobiedermann</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Marco Biedermann
Source: Code / Demo
Created on: MAY 12, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(PostCSS)

54. Responsive Login Form

See the Pen <a href="https://codepen.io/DominicFrancois/pen/naqQja"> Responsive Login Form</a> by Dominic Francois (<a href="https://codepen.io/DominicFrancois">@DominicFrancois</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dominic Francois
Source: Code / Demo
Created on: SEPTEMBER 16, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

55. Wavy login form

See the Pen <a href="https://codepen.io/davinci/pen/YxwwWd"> Wavy login form</a> by Danijel Vincijanovic (<a href="https://codepen.io/davinci">@davinci</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Danijel Vincijanovic
Source: Code / Demo
Created on: JULY 29, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

56. Login & Sign Up Form Concept

See the Pen <a href="https://codepen.io/THEORLAN2/pen/MyedKo"> Login & Sign Up Form Concept</a> by Dany Santos (<a href="https://codepen.io/THEORLAN2">@THEORLAN2</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dany Santos
Source: Code / Demo
Created on: MARCH 12, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

57. CSS Login Template

See the Pen
Css / html Login form by Willie (@timsux-wales)
on CodePen.

Author: Timsux Wales
Source: Code / Demo
Created on: FEBRUARY 11, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

58. Portal Login CSS

See the Pen
portal-login by joaomarcossb (@joaomarcossb)
on CodePen.

Author: joaomarcossb
Source: Code / Demo
Created on: FEBRUARY 13, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

59. Material Compact Login Animation

See the Pen <a href="https://codepen.io/yusufbkr/pen/RPBQqg"> Material Compact Login Animation</a> by Yusuf Bakır (<a href="https://codepen.io/yusufbkr">@yusufbkr</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yusuf Bakır
Source: Code / Demo
Created on: JULY 18, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

60. Batman login form

61. Login – A Dribbble Shot

See the Pen
Login – A Dribbble Shot by Kaushalya R. Mandaliya (@kman)
on CodePen.

Author: Kaushalya R. Mandaliya
Source: Code / Demo
Created on: SEPTEMBER 17, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

62. Login/Registration Form Transition

See the Pen <a href="https://codepen.io/suez/pen/RpNXOR"> Login/Registration Form Transition</a> by Nikolay Talanov (<a href="https://codepen.io/suez">@suez</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nikolay Talanov
Source: Code / Demo
Created on: FEBRUARY 26, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

63. Login Form

See the Pen <a href="https://codepen.io/miroot/pen/AYJGJO"> Login Form</a> by Miro Karilahti (<a href="https://codepen.io/miroot">@miroot</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Miro Karilahti
Source: Code / Demo
Created on: NOVEMBER 15, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

64. Login Form Daily

See the Pen <a href="https://codepen.io/Strusovsky/pen/GxWPvJ"> Login Form Daily UI #001</a> by Andrew (<a href="https://codepen.io/Strusovsky">@Strusovsky</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andrew
Source: ‘ Code / Demo
Created on: MARCH 21, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

65. Animated login form

66. My client login area

67. Another Login Panel

See the Pen <a href="https://codepen.io/clein/pen/neGWRe"> another login panel</a> by Jens Motyka (<a href="https://codepen.io/clein">@clein</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jens Motyka
Source: Code / Demo
Created on: JULY 30, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less)

68. Facebook login form

See the Pen <a href="https://codepen.io/edbond88/pen/nOMLwp"> Facebook login form </a> by Ed Bond (<a href="https://codepen.io/edbond88">@edbond88</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ed Bond
Source: Code / Demo
Created on: FEBRUARY 4, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

69. CSS Cube Login Form

See the Pen <a href="https://codepen.io/marko-zub/pen/mzPeOV"> CSS Cube Login Form</a> by Marko (<a href="https://codepen.io/marko-zub">@marko-zub</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Marko
Source: Code / Demo
Created on: OCTOBER 4, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

70. Login/Logout animation concept

See the Pen <a href="https://codepen.io/suez/pen/dPqxoM"> Login/Logout animation concept</a> by Nikolay Talanov (<a href="https://codepen.io/suez">@suez</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nikolay Talanov
Source: Code / Demo
Created on: MARCH 10, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

71. Elegant Login Form

See the Pen <a href="https://codepen.io/reidark/pen/dyZjwJ"> Elegant Login Form</a> by Victor Hugo Matias (<a href="https://codepen.io/reidark">@reidark</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Victor Hugo Matias
Source: Code / Demo
Created on: JULY 12, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less), JavaScript

72. Login Form

See the Pen <a href="https://codepen.io/comadaihiep92/pen/jOPGgxy"> Login Form – Daily UI – Day 2</a> by Lan Tran (<a href="https://codepen.io/comadaihiep92">@comadaihiep92</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Lan Tran
Source: Code / Demo
Created on: MARCH 6, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

73. Panda Login

See the Pen <a href="https://codepen.io/vineethtrv/pen/NxqKoY"> Panda Login</a> by Vineeth.TR (<a href="https://codepen.io/vineethtrv">@vineethtrv</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Vineeth.TR
Source: Code / Demo
Created on: DECEMBER 9, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

74. Login with Facebook or Twitter

See the Pen <a href="https://codepen.io/marcobiedermann/pen/ngaVwZ"> Login with Facebook or Twitter</a> by Marco Biedermann (<a href="https://codepen.io/marcobiedermann">@marcobiedermann</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Marco Biedermann
Source: Code / Demo
Created on: FEBRUARY 3, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(PostCSS)

75. Double slider Sign in/up Form

See the Pen <a href="https://codepen.io/FlorinPop17/pen/vPKWjd"> Weekly Coding Challenge #1 – Double slider Sign in/up Form – Desktop Only</a> by Florin Pop (<a href="https://codepen.io/FlorinPop17">@FlorinPop17</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Florin Pop
Source: Code / Demo
Created on: MARCH 4, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

76. Accessible Floating Labels Advanced Version

See the Pen <a href="https://codepen.io/elujambio/pen/YLMVed"> CSS-Only Accessible Floating Labels Advanced Version</a> by Pablo Eugenio Lujambio Martinez (<a href="https://codepen.io/elujambio">@elujambio</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Pablo Eugenio Lujambio Martinez
Source: Code / Demo
Created on: MAY 23, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)