Best Material design Login Page using Css and jQuery

In my last article i have Explain how to create login page using Css and jQuery  you may like that as well

Check here :- Best Login page design using Css and jQuery

In this post i am going to create same but material design  login page using Material Design  style.

Lets create html page and add this html:-


<div class="login">
<div class="login-section">
<h1>Please Login</h1>
<form action="#" method="post">
<div class="logfield-wrap">
<input type="text" required value="" id="username" />
<label class="fg-toogle">Email Address</label>
<span class="log-line"></span>
</div>
<div class="logfield-wrap">
<input type="password" required value="" id="password" />
<label class="fg-toogle">Password</label>
<span class="log-line"></span>
</div>
<label class="keep-in"><input class="chkd rmChk" type="checkbox" name="aggrement" value="Condition">
Keep me signed in
</label>
<a id="forgotPwd" class="forgotBt12 forget-section" href="javascript:;">Forgot your password?</a>
<button type="submit">Login</button>
</form>
<div class="or-area">
<span>OR</span>
</div>
<div class="social-container">
<a class="social-btn fb " href="javascript:;">
<span class="social-icon"></span><span class="social-text">Share on Facebook</span>
</a>
<a href="javascript:;" class="social-btn tw">
<span class="social-icon"></span><span class="social-text">Share on Twitter</span>
</a>
</div>
</div>
</div>

Let’s add css:-


<style>
html, body {
background: #eeeeee none repeat scroll 0 0;
margin: 0;
padding: 0;
}

.login {
background: rgb(255, 255, 255) none repeat scroll 0 0;
border: 1px solid #ebebeb;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.098);
border-radius: 4px;
margin: 70px auto;
padding: 20px;
width: 330px;
}

.login h1 {
color: rgb(0, 0, 0);
font-family: sans-serif;
font-size: 17px;
margin-bottom: 30px;
margin-top: 0;
text-align: center;
text-transform: uppercase;
}

.logfield-wrap {
display: block;
margin-bottom: 20px;
position: relative;
}

.logfield-wrap input {
font-size: 13px;
height: 30px;
line-height: 1.5;
width: 100%;
border-bottom: 1px solid #e0e0e0;
border-left: none;
border-right: none;
border-top: none;
-moz-appearance: none;
-webkit-appearance: none;
outline: none;
border-radius: 0;
padding: 0 50px 0 0;
}

.fg-toogle {
color: #959595;
font-family: sans-serif;
font-size: 13px;
font-weight: 400;
left: 0;
pointer-events: none;
position: absolute;
top: 5px;
transition: all 200ms ease 0s;
width: 100%;
z-index: 0;
}

.log-line {
background: #0079ce none repeat scroll 0 0;
bottom: 0;
content: "";
height: 2px;
left: 0;
position: absolute;
transition: all 300ms ease 0s;
width: 0;
z-index: 3;
}

.logfield-wrap input:focus + label + .log-line {
width: 100%;
}
.login button {
width: 100%;
padding: 7px 7px;
background: #0079CE;
box-sizing: border-box;
border-radius: 3px;
border: 1px solid #0079CE;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 14px;
outline: none;
font-family: sans-serif;
cursor: pointer;
}

.login button:hover {
background: #008DDE;
}

.login p {
text-align: center;
}

.keep-in {
color: #3a3939;
cursor: pointer;
float: left;
font-family: sans-serif;
font-size: 13px;
font-weight: 400;
margin: 0 0 26px;
}

.keep-in > .chkd {
display: inline-block;
margin: 0 3px 0 0;
vertical-align: middle;
}

.forget-section {
color: #2f2e2e;
float: right;
font-size: 13px;
font-weight: 400;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: 400;
}
.or-area {
border-top: 1px solid #e3e2e2;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.9) inset;
clear: both;
margin: 30px 0 12px;
text-align: center;
}

.or-area span {
background-color: #f7f9fb;
color: #737a89;
font-family: sans-serif;
font-size: 15px;
padding: 0 20px;
position: relative;
text-transform: capitalize;
top: -14px;
}
.social-btn {
border: 0 none;
border-radius: 3px;
color: #ffffff;
display: inline-block;
font-family: sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1em;
margin: 0 0.25em 0.5em 0;
overflow: hidden;
padding: 0;
position: relative;
text-decoration: none;
text-transform: uppercase;
width: 100%;
}

.social-btn:hover {
color: #fff;
}

.social-icon, .social-text {
display: block;
float: left;
}
.social-icon {
border-right: 0.1em solid rgba(255, 255, 255, 0.1);
box-shadow: -0.1em 0 0 rgba(0, 0, 0, 0.1) inset;
height: 24px;
margin: 0 -0.4em 0 0;
padding: 6px 12px;
width: 20px;
}
.social-text {
font-size: 14px;
font-weight: bold;
padding: 10px 16px;
text-align: center;
}

.fb {
background-color: #205081;
}

.fb:hover, .fb:active {
background-color: #2f5f90;
}

.tw, .tw:active {
background-color: #108ac1;
}

.tw:hover {
background-color: #21aded;
}
.fb .social-icon {
background: rgba(0, 0, 0, 0) url("images/fb.png") no-repeat scroll center center;
}

.tw .social-icon {
background: rgba(0, 0, 0, 0) url("images/tw.png") no-repeat scroll center center;
}
@media only screen and (max-width: 400px) {
.login {
width: 85%;
}
}

//remove red border from required field
input:required {
box-shadow:none;
}
input:invalid {
box-shadow:none;
}
</style>

Now add this jQuery code for  add some animations effects:-


<script>
$(function(){
//set position of label on load if value not empty
$('.logfield-wrap input').each(function(){
if($(this).val().trim().length>0){
$(this).next('.fg-toogle').css('top','-14');
}
});

$('.logfield-wrap input').focus(function(){
$(this).next('.fg-toogle').css('top','-14');
}).blur(function(){
if($(this).val().trim().length > 0){
$(this).next('.fg-toogle').css('top','-14');
}else{
$(this).next('.fg-toogle').css('top','5');
}
});
});
</script>

You can check demo Here

Download Source Code

You can also apply Ripple effects to button check How to create Material design ripple effects using jQuery and Css

 

 

 

 

 

 

One Comment

  1. My Blog May 22, 2017 Reply

Add a Comment

Your email address will not be published. Required fields are marked *