14 Custom User Login Forms

Aug. 20, 2020, 4:34 p.m.

Django Bootstrap · 16 min read

14 Custom User Login Forms

Given our Guide to User Registration, Login, and Logout in Django, we figured it would be good to cover different ways of formatting and styling user register and login forms. 

While login and logout pages are usually simple, we've linked to 14 CodePen custom login forms that offer clean design elements that provide visual interest to an otherwise basic form.

Keep in mind that you will not need any of the form validation JavaScript if you are using the Django authentication system. What you will need to do is replace the <input> elements in the code below with the Django {{ form }} variable.

 

Calling the form in the HTML template

env > mysite > main > templates > main > home.html

<!-- Example-->

<!-- Form Module-->
<div class="module form-module">
  <div class="toggle"><i class="fa fa-times fa-pencil"></i>
    <div class="tooltip">Click Me</div>
  </div>
  <div class="form">
    <h2>Login to your account</h2>
    <form method="POST">
      {% csrf_token %}
      {{ login_form }}
      <button>Login</button>
    </form>
  </div>
  <div class="form">
    <h2>Create an account</h2>
    <form method="POST">
      {% csrf_token %}
      {{ register_form }}
      <button>Register</button>
    </form>
  </div>
  <div class="cta"><a href="#">Forgot your password?</a></div>
</div>

For the code snippets below, locate the HTML <form> element and replace the <input> elements with the {% csrf token %} and the proper form variable, as seen in the example above. 

Please note that we do not take credit for any of the codes provided below. Rather, we would just like to spotlight some awesome code snippets and their CodePen creators. 

 

 

Login Form

By Miro Karilahti

This form is a clean, simple login that focuses the user's attention on the form itself.

 

CSS Code Highlight

/* 'Open Sans' font from Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

body {
  background: #456;
  font-family: 'Open Sans', sans-serif;
}

.login {
  width: 400px;
  margin: 16px auto;
  font-size: 16px;
}

/* Reset top and bottom margins from certain elements */
.login-header,
.login p {
  margin-top: 0;
  margin-bottom: 0;
}

/* The triangle form is achieved by a CSS hack */
.login-triangle {
  width: 0;
  margin-right: auto;
  margin-left: auto;
  border: 12px solid transparent;
  border-bottom-color: #28d;
}

.login-header {
  background: #28d;
  padding: 20px;
  font-size: 1.4em;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}

.login-container {
  background: #ebebeb;
  padding: 12px;
}

/* Every row inside .login-container is defined with p tags */
.login p {
  padding: 12px;
}

.login input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  border-width: 1px;
  border-style: solid;
  padding: 16px;
  outline: 0;
  font-family: inherit;
  font-size: 0.95em;
}

.login input[type="email"],
.login input[type="password"] {
  background: #fff;
  border-color: #bbb;
  color: #555;
}

/* Text fields' focus effect */
.login input[type="email"]:focus,
.login input[type="password"]:focus {
  border-color: #888;
}

.login input[type="submit"] {
  background: #28d;
  border-color: transparent;
  color: #fff;
  cursor: pointer;
}

.login input[type="submit"]:hover {
  background: #17c;
}

/* Buttons' focus effect */
.login input[type="submit"]:focus {
  border-color: #05a;
}

The CSS and custom classes are the most important part of the code. 

 

CodePen

 

 

Flat Login Form 3.0

By Andy Tran

This code offers both a login and register form example. The button on the upper right-hand corner triggers a JS function that changes the form.

 

HTML Code Highlight

<!-- Form Mixin-->
<!-- Input Mixin-->
<!-- Button Mixin-->
<!-- Pen Title-->
<div class="pen-title">
  <h1>Flat Login Form</h1><span>Pen <i class='fa fa-paint-brush'></i> + <i class='fa fa-code'></i> by <a href='http://andytran.me'>Andy Tran</a></span>
</div>
<!-- Form Module-->
<div class="module form-module">
  <div class="toggle"><i class="fa fa-times fa-pencil"></i>
    <div class="tooltip">Click Me</div>
  </div>
  <div class="form">
    <h2>Login to your account</h2>
    <form>
      <input type="text" placeholder="Username"/>
      <input type="password" placeholder="Password"/>
      <button>Login</button>
    </form>
  </div>
  <div class="form">
    <h2>Create an account</h2>
    <form>
      <input type="text" placeholder="Username"/>
      <input type="password" placeholder="Password"/>
      <input type="email" placeholder="Email Address"/>
      <input type="tel" placeholder="Phone Number"/>
      <button>Register</button>
    </form>
  </div>
  <div class="cta"><a href="#">Forgot your password?</a></div>
</div>

Please keep in mind that the HTML is formatted in Pug, so you will need to click the drop-down menu to the right of the HTML code and select "View Compiled HTML" to see the code listed above. You will need to do the same for the CSS given it's in SCSS.

For the rest of the code, click on the CodePen below.

CodePen

 

 

Bootstrap Login Form

By Sinan Celik

Celik provides a login form with social authentication. If you would like to know more about adding social authentication to your Django project, read the article Improve Signup Rates with django-allauth.

 

HTML Code Highlight

  <section class="myform-area">
              <div class="container">
                  <div class="row justify-content-center">
                      <div class="col-lg-8">
                          <div class="form-area login-form">
                              <div class="form-content">
                                  <h2>Login</h2>
                                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non aperiam cum quas quod reprehenderit.</p>
                                  <ul>
                                      <li><a href="#" class="facebook"><i class="fa fa-facebook-f"></i><span>facebook</span></a></li>
                                      <li><a href="#" class="twitter"><i class="fa fa-twitter"></i><span>twitter</span></a></li>
                                  </ul>
                              </div>
                              <div class="form-input">
                                  <h2>Login Form</h2>
                                  <form>
                                      <div class="form-group">
                                          <input type="text"  id="" name="name" required>
                                          <label>User Name</label>
                                      </div>
                                      <div class="form-group">
                                          <input type="password" id="" name="password" required>
                                          <label>password</label>
                                      </div>
                                      <div class="myform-button">
                                          <button class="myform-btn">Login</button>
                                      </div>
                                  </form>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </section>

This code does use Bootstrap to style the form, so you will need to either use the Bootstrap CDN in your template or download Bootstrap in your Django project. 

 

CodePen

 

Simple Bootstrap Login Form

By Luis Manoel

This next HTML and CSS code are simple and easily modified to your website's needs. Manoel provides a no-nonsense form that also uses Bootstrap. 

 

Code Highlight

body {
    background-color: #eee!important;
}

.login {
    background-color: #fff;
    width: 40%;
    margin: 80px auto;
    border-radius: 10px;
    padding: 20px;
    border-left: 5px solid #009688;
    box-shadow: 0px 0px 0px 0px #3f51b5;
}

.login>.row>h2 {
    margin: auto;
}

.btn-form {
    width: 100%;
    margin-top: 20px;
}

Bootstrap handles most of the CSS while the custom login class declaration creates the left border color effect. 

 

CodePen

 

Sign-Up/Login Form

By Eric

Eric offers both a sign-up and login form accessible via two tab buttons at the top of the card. 

 

CSS Code Highlight

*, *:before, *:after {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
}

body {
  background: #c1bdba;
  font-family: 'Titillium Web', sans-serif;
}

a {
  text-decoration: none;
  color: #1ab188;
  -webkit-transition: .5s ease;
  transition: .5s ease;
}
a:hover {
  color: #179b77;
}

.form {
  background: rgba(19, 35, 47, 0.9);
  padding: 40px;
  max-width: 600px;
  margin: 40px auto;
  border-radius: 4px;
  box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}

.tab-group {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
}
.tab-group:after {
  content: "";
  display: table;
  clear: both;
}
.tab-group li a {
  display: block;
  text-decoration: none;
  padding: 15px;
  background: rgba(160, 179, 176, 0.25);
  color: #a0b3b0;
  font-size: 20px;
  float: left;
  width: 50%;
  text-align: center;
  cursor: pointer;
  -webkit-transition: .5s ease;
  transition: .5s ease;
}
.tab-group li a:hover {
  background: #179b77;
  color: #ffffff;
}
.tab-group .active a {
  background: #1ab188;
  color: #ffffff;
}

.tab-content > div:last-child {
  display: none;
}

h1 {
  text-align: center;
  color: #ffffff;
  font-weight: 300;
  margin: 0 0 40px;
}

label {
  position: absolute;
  -webkit-transform: translateY(6px);
          transform: translateY(6px);
  left: 13px;
  color: rgba(255, 255, 255, 0.5);
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  font-size: 22px;
}
label .req {
  margin: 2px;
  color: #1ab188;
}

label.active {
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  left: 2px;
  font-size: 14px;
}
label.active .req {
  opacity: 0;
}

label.highlight {
  color: #ffffff;
}

input, textarea {
  font-size: 22px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px 10px;
  background: none;
  background-image: none;
  border: 1px solid #a0b3b0;
  color: #ffffff;
  border-radius: 0;
  -webkit-transition: border-color .25s ease, box-shadow .25s ease;
  transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus {
  outline: 0;
  border-color: #1ab188;
}

textarea {
  border: 2px solid #a0b3b0;
  resize: vertical;
}

.field-wrap {
  position: relative;
  margin-bottom: 40px;
}

.top-row:after {
  content: "";
  display: table;
  clear: both;
}
.top-row > div {
  float: left;
  width: 48%;
  margin-right: 4%;
}
.top-row > div:last-child {
  margin: 0;
}

.button {
  border: 0;
  outline: none;
  border-radius: 0;
  padding: 15px 0;
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: #1ab188;
  color: #ffffff;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-appearance: none;
}
.button:hover, .button:focus {
  background: #179b77;
}

.button-block {
  display: block;
  width: 100%;
}

.forgot {
  margin-top: -20px;
  text-align: right;
}

The original code is uncompiled SCSS, so you will need to select "View Compiled CSS" in the drop-down menu to get the plain CSS code. 

 

CodePen

 

 

Login Form - Modal

By Andy Tran

Tran, the same creator of the Flat Login Form 3.0 linked above, also created this CodePen. It offers a login and a registration form that appears when a form toggle is clicked. 

 

HTML Code Highlight

<!-- Form-->
<div class="form">
  <div class="form-toggle"></div>
  <div class="form-panel one">
    <div class="form-header">
      <h1>Account Login</h1>
    </div>
    <div class="form-content">
      <form>
        <div class="form-group">
          <label for="username">Username</label>
          <input type="text" id="username" name="username" required="required"/>
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" id="password" name="password" required="required"/>
        </div>
        <div class="form-group">
          <label class="form-remember">
            <input type="checkbox"/>Remember Me
          </label><a class="form-recovery" href="#">Forgot Password?</a>
        </div>
        <div class="form-group">
          <button type="submit">Log In</button>
        </div>
      </form>
    </div>
  </div>
  <div class="form-panel two">
    <div class="form-header">
      <h1>Register Account</h1>
    </div>
    <div class="form-content">
      <form>
        <div class="form-group">
          <label for="username">Username</label>
          <input type="text" id="username" name="username" required="required"/>
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" id="password" name="password" required="required"/>
        </div>
        <div class="form-group">
          <label for="cpassword">Confirm Password</label>
          <input type="password" id="cpassword" name="cpassword" required="required"/>
        </div>
        <div class="form-group">
          <label for="email">Email Address</label>
          <input type="email" id="email" name="email" required="required"/>
        </div>
        <div class="form-group">
          <button type="submit">Register</button>
        </div>
      </form>
    </div>
  </div>
</div>
<div class="pen-footer"><a href="https://www.behance.net/gallery/30478397/Login-Form-UI-Library" target="_blank"><i class="material-icons">arrow_backward</i>View on Behance</a><a href="https://github.com/andyhqtran/UI-Library/tree/master/Login%20Form" target="_blank">View on Github<i class="material-icons">arrow_forward</i></a></div>

Like his previous code, the HTML and CSS will need to be compiled if you are looking to use plain HTML elements and CSS declarations.

 

CodePen

 

 

Snake Highlight

By Mikael Ainalem

Ainalem provides a very unique login form with a snaking highlight. A bar follows the user's selection and highlights the input selected. 

 

JS Code Highlight

var current = null;
document.querySelector('#email').addEventListener('focus', function(e) {
  if (current) current.pause();
  current = anime({
    targets: 'path',
    strokeDashoffset: {
      value: 0,
      duration: 700,
      easing: 'easeOutQuart'
    },
    strokeDasharray: {
      value: '240 1386',
      duration: 700,
      easing: 'easeOutQuart'
    }
  });
});
document.querySelector('#password').addEventListener('focus', function(e) {
  if (current) current.pause();
  current = anime({
    targets: 'path',
    strokeDashoffset: {
      value: -336,
      duration: 700,
      easing: 'easeOutQuart'
    },
    strokeDasharray: {
      value: '240 1386',
      duration: 700,
      easing: 'easeOutQuart'
    }
  });
});
document.querySelector('#submit').addEventListener('focus', function(e) {
  if (current) current.pause();
  current = anime({
    targets: 'path',
    strokeDashoffset: {
      value: -730,
      duration: 700,
      easing: 'easeOutQuart'
    },
    strokeDasharray: {
      value: '530 1386',
      duration: 700,
      easing: 'easeOutQuart'
    }
  });
});

The JavaScript function used in this CodePen does use the animation library Anime.js. This means you will need to add the appropriate Anime CDN for the animation to work.  

 

CodePen

 

Sign Up & Login Form

By Trang Si Hung

Hung uses JQuery to create a signup and login form within the same card. Tabs separate the two forms. 

 

JS Code Highlight

jQuery(document).ready(function($) {
	tab = $('.tabs h3 a');

	tab.on('click', function(event) {
		event.preventDefault();
		tab.removeClass('active');
		$(this).addClass('active');

		tab_content = $(this).attr('href');
		$('div[id$="tab-content"]').removeClass('active');
		$(tab_content).addClass('active');
	});
});

Be sure to add the jQuery CDN to your project if you would like to use this code.

 

CodePen

 

Login Form #13

By Adam

This user offers two forms, a login and a signup form, both with gradient borders and links to the other form. The two forms are easily identifiable given the color change on the form change. 

 

JS Code Highlight

function signup()
{
    document.querySelector(".login-form-container").style.cssText = "display: none;";
    document.querySelector(".signup-form-container").style.cssText = "display: block;";
    document.querySelector(".container").style.cssText = "background: linear-gradient(to bottom, rgb(56, 189, 149),  rgb(28, 139, 106));";
    document.querySelector(".button-1").style.cssText = "display: none";
    document.querySelector(".button-2").style.cssText = "display: block";

};

function login()
{
    document.querySelector(".signup-form-container").style.cssText = "display: none;";
    document.querySelector(".login-form-container").style.cssText = "display: block;";
    document.querySelector(".container").style.cssText = "background: linear-gradient(to bottom, rgb(6, 108, 224),  rgb(14, 48, 122));";
    document.querySelector(".button-2").style.cssText = "display: none";
    document.querySelector(".button-1").style.cssText = "display: block";

}

We chose to highlight the JavaScript code as it changes the form and the linear gradient colors.

 

CodePen

 

 

Login Form Validation in JavaScript

By Dinesh

Similar to the last code, this user uses a gradient to highlight the login form. 

 

CSS Code Highlight

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap');

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Jost', sans-serif;
	outline: none;
	color: #5c4b51;
}

body{
	background: linear-gradient(to right, #f4b661, #f16160);
}

.wrapper{
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.form{
	width: 425px;
	height: auto;
	background: #fff;
	padding: 35px 50px;
	border-radius: 2px;
}

.form .title{
	text-align: center;
	margin-bottom: 20px;
	font-weight: 700;
	font-size: 24px;
}

.form .input_wrap{
	margin-bottom: 20px;
	width: 325px;
	position: relative;
}

.form .input_wrap:last-child{
	margin-bottom: 0;
}

.form .input_wrap label{
	display: block;
	margin-bottom: 5px;
}

.form .input_wrap input{
	padding: 15px;
	width: 100%;
	border: 1px solid transparent;
	font-size: 16px;
	border-radius: 3px;
}

.form .input_wrap .input{
	background: #f5f4f4;
	padding-right: 35px;
}


.form .input_wrap .input:focus{
	border-color: #1dbf73;
}

.form .input_wrap .input_field{
	position: relative;
}

.form .input_wrap .btn{
	text-transform: uppercase;
	letter-spacing: 3px;
	color: #fff;
}

.form .input_wrap .btn.disabled{
	background: #727272;
}

.form .input_wrap .btn.enabled{
	background: #1dbf73;
	cursor: pointer;
}

.form .input_wrap .error_msg{
	font-size: 15px;
	margin-bottom: 5px;	
	color: #f74040;
	display: none;
}

If you are using Django forms, the important part of the code is the CSS and HTML code. The JavaScript is for the form validation, something that is built into the Django authentication system. 

 

CodePen

 

Animated Login Form

By Mahender

The user Mahender created an animated login form using only HTML and CSS.

 

CSS Code Highlight

body{

  margin: 0;

  padding: 0;

  font-family: sans-serif;

  background: #34495e;

}

.box{

  width: 300px;

  padding: 40px;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%,-50%);

  background: #191919;

  text-align: center;

}

.box h1{

  color: white;

  text-transform: uppercase;

  font-weight: 500;

}

.box input[type = "text"],.box input[type = "password"]{

  border:0;

  background: none;

  display: block;

  margin: 20px auto;

  text-align: center;

  border: 2px solid #3498db;

  padding: 14px 10px;

  width: 200px;

  outline: none;

  color: white;

  border-radius: 24px;

  transition: 0.25s;

}

.box input[type = "text"]:focus,.box input[type = "password"]:focus{

  width: 280px;

  border-color: #2ecc71;

}

.box input[type = "submit"]{

  border:0;

  background: none;

  display: block;

  margin: 20px auto;

  text-align: center;

  border: 2px solid #2ecc71;

  padding: 14px 40px;

  outline: none;

  color: white;

  border-radius: 24px;

  transition: 0.25s;

  cursor: pointer;

}

.box input[type = "submit"]:hover{

  background: #2ecc71;

}

The focus selector creates the width change on user select, so be sure to include those declarations if you would like to use this CodePen.

 

CodePen

 

Login Form

By Vaishali Singh

The next login form uses the CSS background property to display a background image behind the sign in and sign up form.

 

CSS Code Highlight

body{
	margin:0;
	color:#6a6f8c;
	background:#c8c8c8;
	font:600 16px/18px 'Open Sans',sans-serif;
}
*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}

.login-wrap{
	width:100%;
	margin:auto;
	max-width:525px;
	min-height:670px;
	position:relative;
	background:url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg) no-repeat center;
	box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}
.login-html{
	width:100%;
	height:100%;
	position:absolute;
	padding:90px 70px 50px 70px;
	background:rgba(40,57,101,.9);
}
.login-html .sign-in-htm,
.login-html .sign-up-htm{
	top:0;
	left:0;
	right:0;
	bottom:0;
	position:absolute;
	transform:rotateY(180deg);
	backface-visibility:hidden;
	transition:all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check{
	display:none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button{
	text-transform:uppercase;
}
.login-html .tab{
	font-size:22px;
	margin-right:15px;
	padding-bottom:5px;
	margin:0 15px 10px 0;
	display:inline-block;
	border-bottom:2px solid transparent;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab{
	color:#fff;
	border-color:#1161ee;
}
.login-form{
	min-height:345px;
	position:relative;
	perspective:1000px;
	transform-style:preserve-3d;
}
.login-form .group{
	margin-bottom:15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
	width:100%;
	color:#fff;
	display:block;
}
.login-form .group .input,
.login-form .group .button{
	border:none;
	padding:15px 20px;
	border-radius:25px;
	background:rgba(255,255,255,.1);
}
.login-form .group input[data-type="password"]{
	text-security:circle;
	-webkit-text-security:circle;
}
.login-form .group .label{
	color:#aaa;
	font-size:12px;
}
.login-form .group .button{
	background:#1161ee;
}
.login-form .group label .icon{
	width:15px;
	height:15px;
	border-radius:2px;
	position:relative;
	display:inline-block;
	background:rgba(255,255,255,.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
	content:'';
	width:10px;
	height:2px;
	background:#fff;
	position:absolute;
	transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
	left:3px;
	width:5px;
	bottom:6px;
	transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
	top:6px;
	right:0;
	transform:scale(0) rotate(0);
}
.login-form .group .check:checked + label{
	color:#fff;
}
.login-form .group .check:checked + label .icon{
	background:#1161ee;
}
.login-form .group .check:checked + label .icon:before{
	transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
	transform:scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
	transform:rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
	transform:rotate(0);
}

.hr{
	height:2px;
	margin:60px 0 50px 0;
	background:rgba(255,255,255,.2);
}
.foot-lnk{
	text-align:center;
}

Transform and transform-style are the main CSS properties used to create the 3d form flip.

 

CodePen

 

 

Login Form - HTML/CSS

By Yash Chouhan

Chouhan took a different approach to the login form by having links to social authentication at the bottom of the login card. 

 

HTML Code Highlight

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 <link href="https://fonts.googleapis.com/css?family=Nunito:600,700,900" rel="stylesheet">

</head>
<body id="body">

<div id="login-card" class="card">
<div class="card-body">
  <h2 class="text-center">Login form</h2>
  <br>
  <form action="/action_page.php">
    <div class="form-group">
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="form-group">
      <input type="password" class="form-control" id="email" placeholder="Enter password" name="pswd">
    </div>
    <button type="submit" id="button" class="btn btn-primary deep-purple btn-block ">Submit</button>
<br>
    <br>
   
    <div id="btn" class="text-center">
   <button type="button" class="btn btn-primary btn-circle btn-sm"><i class="fa fa-facebook"></i></button>
   <button type="button" class="btn btn-danger btn-circle btn-sm"><i class="fa fa-google"></i></button>
   <button type="button" class="btn btn-info btn-circle btn-sm"><i class="fa fa-twitter"></i></button>
   </div>

  </form>
</div>
<div>

The HTML code uses Bootstrap to style most of the form, and the social media links are added as Bootstrap circular buttons. If you would like to use Bootstrap, you will need the CDN or download Bootstrap to your project.

 

CodePen

 

Amazing Login Form

By Creative Chain

Although this last CodePen has more code than the previous snippets, the login and logout form have a distinct look and transitions that really set this code apart from the rest. 

 

JS Code Highlight

:root{
  font-size:16px;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
}
body{
  align-items:center;
  background-color:#e9e9e9;
  background:url(https://res.cloudinary.com/dwbddafc1/image/upload/v1597151453/background_n6feku.jpg);
  background-attachment:fixed;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  display:grid;
  height:100vh;
  place-items:center;
}

.form__title{
  font-weight:300;
  margin:0;
  margin-bottom:1.25rem;
}

.link{
  color:#333;
  font-size:0.9rem;
  margin:1.5rem 0;
}
.container{
  background-color:#e9e9e9;
  border-radius:0.7rem;
  box-shadow: 0 0.9rem 1.7rem rgba(0,0,0,0.25),
    0 0.7rem 0.7rem rgba(0,0,0,0.22);
  height:420px;
  max-width:758px;
  overflow:hidden;
  position:relative;
  width:100%;
}

.container__form{
  height:100%;
  position:absolute;
  transition:all 0.6s ease-in-out;
}
.container--signin{
  left:0;
  width:50%;
  z-index:2;
}
.container.right-panel-active .container--signin{
  tranform:translateX(100%);
}
.container--signup{
  left:0;
  opacity:0;
  width:50%;
  z-index:1;
}
.container.right-panel-active .container--signup{
  animation:show 0.6s;
  opacity:1;
  transform:translateX(100%);
  z-index:5;
}
.container__overlay{
  height:100%;
  left:50%;
  overflow:hidden;
  position:absolute;
  top:0;
  transition:transform 0.6s ease-in-out;
  width:50%;
  z-index:100;
}
.container.right-panel-active .container__overlay{
  transform:translateX(-100%);
}
.overlay{
  background-color:#008997;
  background:url(https://res.cloudinary.com/dwbddafc1/image/upload/v1597151453/background_n6feku.jpg);
  background-attachment:fixed;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  height:100%;
  left:-100%;
  position:relative;
  transform:translateX(0);
  transition:transform 0.6s ease-in-out;
  width:200%;
}
.container.right-panel-active .overlay{
  transform:translateX(50%);
}
.overlay__panel{
  align-items:center;
  display:flex;
  flex-dirextion:column;
  height:100%;
  justify-content:center;
  position:absolute;
  text-align:center;
  top:0;
  transform:translateX(0);
  transition:transform 0.6s ease-in-out;
  width:50%;
}
.overlay--left{
  transform:translateX(-20%);
}
.container.right-panel-active .overlay--left{
  transform:translateX(0);
}
.overlay--right{
  right:0;
  transform:translateX(0);
}
.container.right-panel-active .overlay--right{
  transform:translateX(20%);
}
.btn{
  background-color:#0367a6;
  background-image:linear-gradient(90deg,#0367a6 0%,#008997 74%);
  border-radius:20px;
  border:1px solid #0367a6;
  color:#e9e9e9;
  cursor:pointer;
  font-size:0.8rem;
  font-weight:bold;
  letter-spacing:0.1rem;
  padding:0.9rem 4rem;
  text-transform:uppercase;
  transition:transform 80ms ease-in;
}
.fomr > .btn{
  margin-top:1.5rem;
}
.btn:active{
  transform:scale(0.95);
}
.btn:focus{
  outline:none;
}
.form{
  background-color:#e9e9e9;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:0 3rem;
  height:100%;
  text-align:center;
}
.input{
  border:none;
  padding:0.9rem 0.9rem;
  margin:0.5rem 0;
  width:100%;
}
@keyframes show{
  0%,49.99%{
    opacity:0;
    z-index:1;
  }
  50%,100%{
    opacity:1;
    z-index:5;
  }
}

The custom class attributes and the CSS declarations are the keys to recreating these forms and the transitions.

 

CodePen

 

 


0
Subscribe now

Subscribe to stay current on our latest articles and promos





Post a Comment
Join the community

0 Comments