Perfect Login

CSS and (little) jQuery login in Material Design style!

by Luca De Nardi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<script src="https://fonts.googleapis.com/css?family=Lato:400,100,300"></script>
		<span class="helper">
      Better seen on fullscreen!<br>Correct Username and Password are: test/test
</span>
<div class="placer">
			<div class="circle"></div>
			<b class="expander fa fa-user" onclick="expand()"></b>
			<input type="password" tabindex="2" class="input password hidden" placeholder="Password">
			<input type="text" tabindex="1" class="input user hidden" placeholder="Username">
			<button class="login" onclick="login()">Login</button>
		</div>
		<div class="result"></div>

CSS

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #2D2D2D;
  position: relative;
  margin: 0;
  padding: 0;
}

* {
  color: white;
  font-family: Lato;
  font-weight: 100;
  z-index: 1;
}

.circle:not(.expanded) .input {
  opacity: 0;
  pointer-events: none;
}

.input {
  background: none;
  outline: none;
  /*border: 1px solid white;*/
  border: none;
  transition: .5s all ease-in-out;
  position: absolute;
  left: 0;
  opacity: 1;
  width: 200px;
  pointer-events: all;
  height: 30px;
  top: 70px;
  transform: translateX(-50%);
  font-size: 25px;
}

.input.password:not(:focus) {
  transform: translateX(-50%) rotateX(180deg) scaleX(-1);
  top: 100px;
}

.input.password:focus {
  transform: translateX(-50%) rotateX(180deg) rotateZ(180deg) scaleX(-1);
}

.input.password:focus~.user {
  transform: translateX(-50%) rotateZ(180deg);
  top: 100px;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: white;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%) translateY(-50%);
  z-index: 0 !important;
  transition: .5s all ease-in-out, .75s border-radius;
}

.circle.expanded {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: white;
  border-radius: 0;
  transform: translateX(-50%) translateY(-50%);
  width: 200px;
  height: 200px;
}

.circle:focus {
  border-color: #00ABFF;
}

.placer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.hidden {
  opacity: 0;
  pointer-events: none;
  width: 0;
  top: 0;
}

.expander {
  cursor: pointer;
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  transition: .75s all ease-in-out;
  transform: translateX(-50%) translateY(-50%);
}

.expander.expanded {
  font-size: 40px;
  top: -50px;
}

.login {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%) translateY(-50%);
  transition: 1s all ease-in-out, .3s...

JavaScript

function expand(){
				$('.circle').toggleClass('expanded');
				$('.expander').toggleClass('expanded');
				$('.login').toggleClass('expanded');
				$('.input').toggleClass('hidden');
				$('.user').focus();
				$('.result').removeClass().addClass('result');
				$('*').removeClass('dark-text');
			}
			function login(){
				if($('.user').val() == 'test' && $('.password').val() == 'test'){
					$('.result').removeClass().addClass('result success');
					$('*').removeClass('dark-text');
				}else{
					$('.result').removeClass().addClass('result error');
					$('*').addClass('dark-text');
				}
			}