Dark Neumorphism Login Form Design

byCodingFlicks -September 24, 2020

0

Hello Friends, Today, I will share a snippet based on creating a dark neumorphism login form using HTML, CSS, and javascript. Here in this login form design, a floating label animation will occur when we click on the input area. On top of it, We will see the show and hide animation of password and simple form validation for which we used javascript.

Neumorphism has become a trend in web design nowadays. Lots of web designers using this trend in their website design. In this project, we have used this trend to create the login form. I have used Simple HTML markup and simple CSS styling to create this dark neumorphism effect around the login form. Besides, we have used CSS animation of the floating label for the input element when they are on focus. When we click on the input element to put, the data placeholder will move to 15px on top of the input area. Instead of explaining any further, I am providing you the source code below to play with code by yourself.

You May also like:

To make this snippet your own, you have to create three files. These files are HTML, CSS, and a js file. Copy the codes and paste them to your files where necessary and save. Run the project in your browser and make changes according to your need.

REQUIRED FILES

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Dark Neumorphism Login Form Design </title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">	
</head>
<body>
<div class="box">
<div class="wrapper">
<div class="login-box">
<form class="form-area form-vali">
<span class="title-area">
Login Form
</span>

<div class="wrap-input input-vali" data-validate = "not a valid email">
<input class="input" type="text" name="email">
<span class="focus-area" data-placeholder="Your Email"></span>
</div>

<div class="wrap-input input-vali" data-validate="you didn't put password">
<span class="show-pass">
<i class="zmdi zmdi-eye"></i>
</span>
<input class="input" type="password" name="pass">
<span class="focus-area" data-placeholder="Your Password"></span>
</div>

<div class="btn-area">
<div class="single-btn">
<button class="btn">Login</button>
</div>
</div>

<div class="lower-area">
<span class="right-text">No account?</span>
<a class="left-text" href="#">Sign Up</a>
</div>
</form>
</div>
</div>
</div>
</body>
</html>

CSS

* {
margin: 0; 
padding: 0; 
box-sizing: border-box;
}

body, html {
height: 100%;
font-family: lato;
background: #212121;
}
input {
outline: none;
border: none;
}
input:focus {
border-color: transparent !important;
}

input:focus::-webkit-input-placeholder { color:transparent; }

.box {
width: 100%;
margin: 0 auto;
}
.box {
background: #212121;
}
.wrapper { 
display: flex;
padding: 15px;
background: #212121;
flex-wrap: wrap;
justify-content: center;
align-items: center;  
width: 100%;  
min-height: 100vh;
}

.login-box {
border-radius: 30px;
overflow: hidden;
padding: 66px 55px 66px 55px;
box-shadow: 6px 6px 12px #1b1a1a, -6px -6px 12px #2b2b2b;
width: 400px;
background: #212121;  
}

.form-area {
width: 100%;
}

.title-area {
font-weight: bold;
color: darkorange;
line-height: 1.2;
text-align: center;
padding-bottom: 40px;
text-transform: uppercase;
display: block;
font-family: 'Poppins';
font-size: 25px;	
}
.title-area i {
font-size: 60px;
}

.wrap-input {
width: 100%;
position: relative;
border-bottom: 2px solid #adadad;
margin-bottom: 37px;
}

.input {
display: block;
width: 94%;
height: 45px;
background: transparent;
padding: 0 5px;
font-family: 'Poppins';
font-size: 15px;
color: darkorange;
line-height: 1.2;  
}
.focus-area {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}

.focus-area::before {
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
transition: all 0.4s;
background: darkorange;
content: "";
display: block;  
}

.focus-area::after {
position: absolute;
top: 16px;
left: 0px;
padding-left: 5px;
transition: all 0.4s;
font-family: 'Poppins';
font-size: 15px;
color: #999999;
line-height: 1.2;
content: attr(data-placeholder);
display: block;
width: 100%;  
}

.input:focus + .focus-area::after {
top: -15px;
}

.input:focus + .focus-area::before {
width: 100%;
}

.has-val.input + .focus-area::after {
top: -15px;
}

.has-val.input + .focus-area::before {
width: 100%;
}

.show-pass {
font-size: 15px;
color: #999999;
display: flex;
align-items: center;
position: absolute;
height: 100%;
top: 0;
right: 0;
padding-right: 5px;
cursor: pointer;
transition: all 0.4s;
}
.show-pass:hover {
color: darkorange;
}
.show-pass.active 
{
color: darkorange;
}

button {
outline: none !important;
border: none;
background: transparent;
}

.right-text {
font-family: 'Poppins';
font-size: 13px;
color: #666666;
line-height: 1.5;
}
.left-text {
font-family: 'Poppins';
font-size: 13px;
color: #333333;
line-height: 1.5;
}
.btn-area {
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 20px;
}

.single-btn {
width: 100%;
display: block;
position: relative;
z-index: 1;
border-radius: 25px;
overflow: hidden;
margin: 0 auto;
box-shadow: 6px 6px 12px #1b1a1a, -6px -6px 12px #2b2b2b;
}

.btn {
font-family: 'Poppins';
font-size: 15px;
color: darkorange;
line-height: 1.2;
font-weight: bold;
text-transform: uppercase;
display: flex;
justify-content: center;
align-items: center;
letter-spacing: 1px;
padding: 0 20px;
width: 100%;
height: 50px;
transition: .9s;
}
.btn:hover
{
background:darkorange;
color: #ddd;
}
.btn:active
{
background:rgb(255, 145, 19);
color: #ddd;
}

.lower-area
{
text-align: center;
padding-top: 70px;
}

.right-text {
font-family: 'Poppins';
font-size: 13px;
color: #666666;
line-height: 1.5;
}

.left-text {
font-family: 'Poppins';
font-size: 13px;
color: #333333;
line-height: 1.5;
text-decoration: none;

}

.left-text:hover
{
text-decoration: underline;
}

@media (max-width: 576px) {
.login-box {
padding: 77px 15px 33px 15px;
}
}
.input-vali {
position: relative;
}
.box-vali:before {
content: attr(data-validate);
position: absolute;
max-width: 70%;
background-color: #fff;
border: 1px solid red;
border-radius: 2px;
padding: 4px 25px 4px 10px;
top: 50%;
transform: translateY(-50%);
right: 0px;
pointer-events: none;
font-family: 'Poppins';
color: red;
font-size: 13px;
line-height: 1.4;
text-align: left;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.box-vali:after {
content: "\f1f8";
font-family:Material-Design-Iconic-Font;
font-size: 21px;
color: red;
display: block;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 5px;
}
.box-vali:hover:before {
visibility: visible;
opacity: 1;
}
@media (max-width: 992px) 
{
.box-vali:before {
visibility: visible;
opacity: 1;
}
}

JS

$('.input').each(function(){
    $(this).on('blur', function(){
        if($(this).val().trim() != "") {
            $(this).addClass('has-val');
        }
        else {
            $(this).removeClass('has-val');
        }
    })    
})


var input = $('.input-vali .input');

$('.form-vali').on('submit',function(){
    var check = true;

    for(var i=0; i<input.length; i++) {
        if(validate(input[i]) == false){
            showValidate(input[i]);
            check=false;
        }
    }

    return check;
});


$('.form-vali .input').each(function(){
    $(this).focus(function(){
       hideValidate(this);
    });
});

function validate (input) {
    if($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
        if($(input).val().trim().match(/^([a-zA-Z0.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-z9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
            return false;
        }
    }
    else {
        if($(input).val().trim() == ''){
            return false;
        }
    }
}

function showValidate(input) {
    var thisAlert = $(input).parent();

    $(thisAlert).addClass('box-vali');
}

function hideValidate(input) {
    var thisAlert = $(input).parent();

    $(thisAlert).removeClass('box-vali');
}


var showPass = 0;
$('.show-pass').on('click', function(){
    if(showPass == 0) {
        $(this).next('input').attr('type','text');
        $(this).find('i').removeClass('zmdi-eye');
        $(this).find('i').addClass('zmdi-eye-off');
        showPass = 1;
    }
    else {
        $(this).next('input').attr('type','password');
        $(this).find('i').addClass('zmdi-eye');
        $(this).find('i').removeClass('zmdi-eye-off');
        showPass = 0;
    }

});

I hope it helps. For getting the latest updates from this blog, please follow our social media profiles and stay connected.

Please do not enter any spam link in the comment box.