<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<div class="btn center buttonsize">
  <div class="button" href="#">
    <i class="fa fa-refresh loading"></i>
    <span class="text">Sign in</span>
  </div>
  <div class="content">
    <div class="input">
        <input class='username' placeholder="username" type="text" required=""></input>
        <input class="password" placeholder="password" type="" required=""></input>
    </div>
    <a class="childbtn cancel"><i class="fa fa-ban" style="padding-right: 5px;"></i> Cancel</a>
    <a class="childbtn submit">Submit<i class="fa fa-paper-plane" style="padding-left: 10px;"></i></a>
    </div>
</div>

$button-width: 225px;
$button-height: 100px;
$content-height: 450px;
$content-width: 400px;

$bgcolor: #18BAFF;

$transition: cubic-bezier(.36,.37,.32,.91);


@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);

@-webkit-keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

body {
  display: flex;
  background-color: #f5f5f5;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Open Sans', sans-serif;
}

.btn {
  transition: $transition 0.4s all;
  display: block;
  position: absolute;    
  background-color: $bgcolor;
  overflow: hidden;
  opacity: 1;
  right: 0;
  left: 0;
  top: 50%;
  bottom: 0;
  transform: translateY(-50%);
  cursor: pointer;
  text-align: center;

  &.done {
    cursor: default;
    pointer-events: none;
  }

  &.buttonsize {
    width: $button-width;
    height: $button-height;
    &:hover {
      background-color: lighten($bgcolor, 15%);
    }
  }

  &.contentsize {
    width: $content-width;
    height: $content-height;
    cursor: initial;
  }
}
.center {
  margin: 0 auto;
}

.button {
  transition: $transition 0.3s all;
  position: absolute;
  display: inline-block;
  left: 0;
  right: 0;
  color: white;
  font-size: 24px;
  line-height: $button-height;

  .loading {
    transition: 0.3s $transition all;
    visibility: hidden;
    opacity: 0;
    font-size: 0;

    &.visible {
      transition: 0.3s $transition all;
      animation: rotating 2s $transition infinite;
      visibility: visible;
      opacity: 1;
      font-size: 35px;
    }
  }

  .text {
    transition: 0.3s $transition all;
    text-decoration: none;
    opacity: 1;
    visibility: visible;

    &.header {
      font-size: 40px;
    }

    &.invisible {
      transition: 0.3s $transition all;
      opacity: 0;
      font-size: 0px;
      visibility: hidden;
    }
  }
}

.content {
  transition: $transition 0.2s all;
  position: absolute;
  display: block;
  opacity: 0;
  text-decoration: none;
  color: white;
  font-size: 24px;

  height: 100%;
  width: 100%;

  left: 0;
  right: 0;
  top: 50%;
  bottom: 0;

  transform: translateY(-50%);
  pointer-events: none;

  &.visible {
    pointer-events: auto;
    transition-delay: 0.2s;
    opacity: 1;
  }

  .childbtn {
    transition: 0.3s $transition all;
    position: absolute;
    bottom: 75px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 15px;
    padding-left: 15px;

    color: #484848 ;
    background-color: white;
    border-radius: 2px;

    cursor: pointer;
    &.cancel {
      box-shadow: 0 3px 17px 0 rgba(0, 0, 0, 0.2), 0 2px 20px 0             rgba(0, 0, 0, 0.19);
      left: 50px;
      &:hover {
        color: white;
        background-color: #FF5722;      
        box-shadow: 0 4px 17px 0 rgba(0, 0, 0, 0.2), 0 4px 17px 0             rgba(0, 0, 0, 0.19);;
        transform: translateY(-2px);
      }
    }

    &.submit {
      right: 50px;
      background-color: #DFDFDF;
      color: #9F9F9F;
      cursor: default;
      &:hover {
        box-shadow: none;
        transform: none;
      }
      &.active {
        box-shadow: 0 3px 17px 0 rgba(0, 0, 0, 0.2), 0 2px 20px 0 rgba(0, 0, 0, 0.19);
        background-color: white;
        color: black;
        cursor: pointer;
        &:hover {
          color: white;
          background-color: lighten($bgcolor, 10%);
          box-shadow: 0 4px 17px 0 rgba(0, 0, 0, 0.2), 0 4px 17px 0             rgba(0, 0, 0, 0.19);
          transform: translateY(-2px);
        }
      }
    }

    &:active {
      box-shadow: 0 2px 17px 0 rgba(0, 0, 0, 0.2), 0 2px 17px 0             rgba(0, 0, 0, 0.19);;
      transform: translateY(2px);
    }
  }

  .input {
    position: relative;
    display: inline-block;
    max-width: 350px;
    vertical-align: top;
    margin: 0 auto;
    margin-top: 130px;
    color: lighten($bgcolor, 30%);

    input {
      transition: 0.3s $transition all;
      font-size: 20px;
      padding-top: 14px;
      padding-bottom: 14px;
      padding-left: 15px;
      width: 250px;
      border: none;
      border-radius: 2px;
      background: linear-gradient(to bottom, rgba(255,255,255,0.5) 96%,       darken($bgcolor,15%) 4%);
      
      &::-webkit-input-placeholder {
        transition: 0.3s $transition all;
        color: darken($bgcolor,5%);
        font-size: 18px;
      }

      &:focus, &:valid {
        outline: none;
        background-color: white;

        &::-webkit-input-placeholder {
          transition: 0.3s $transition all;
          color: white;
          font-size: 16px;
          transform: translateY(-37px);
          visibility: visible !important;
        }
      }
    }
    .password {
      margin-top: 35px;
    }
  }
}

var btn = document.querySelector('.btn');

var buttoncontent = document.querySelector('.button');
var content = document.querySelector('.content');
var text = document.querySelector('.text');
var loading = document.querySelector('.loading');

var cancelbtn = document.querySelector('.cancel');
var submitbtn = document.querySelector('.submit');

var username = document.querySelector('.username');
var password = document.querySelector('.password');

buttoncontent.addEventListener('click', function(event) {
    btn.classList.remove('buttonsize');
    btn.classList.add('contentsize');
    content.classList.add('visible');
    text.classList.add('header');
    password.setAttribute('type', 'password');
});

cancelbtn.addEventListener('click', function(event) {
  btn.classList.add('buttonsize');
  btn.classList.remove('contentsize');
  content.classList.remove('visible');
  text.classList.remove('header');
  password.setAttribute('type', '');
});


submitbtn.addEventListener('click', function(event) {
  if(username.value && password.value) {
    btn.classList.add('buttonsize');
    btn.classList.remove('contentsize');
    content.classList.remove('visible');
    text.classList.remove('header');
    text.classList.add('invisible');
    loading.classList.add('visible');
  
    setTimeout(function() {
      text.setAttribute('style', 'transition-delay: 0.2s;');
      text.classList.remove('invisible');
      loading.classList.remove('visible');
      text.textContent = "Welcome " + username.value + "!";
      btn.classList.add('done');
    }, 2000)
  }
});

username.addEventListener('keyup', function(event) {
  checkBox();
});

password.addEventListener('keyup', function(event) {
  checkBox();
});

function checkBox() {
  if(username.value && password.value) {
    submitbtn.classList.add('active');
  } else {
    submitbtn.classList.remove('active');
  }
}