// Mixins
mixin input(type, label)
  .input-container
    input(type='#{type}' id='#{label}' required)
    label(for='#{label}')=label
    .bar
mixin button(text)
  .button-container
    button
      span=text

// Pen Title
.pen-title
  h1 Login Form phong cách Material Design
  span
    | Pen <i class='fa fa-code'></i> by <a href='http://laivanduc.com'>Lại Văn Đức</a>
    
.rerun
  a(href='') Làm Mới
  
.container
  .card
  .card
    h1.title Đăng Nhập
    form
      +input('text', 'Username')
      +input('password', 'Password')
      +button('Go')
      .footer
        a(href='#') Lại mất mật khẩu ah?
  .card.alt
    .toggle
    h1.title Đăng Ký
      .close
    form
      +input('text', 'Username')
      +input('password', 'Password')
      +input('password', 'Repeat Password')
      +button('Next')
View Compiled
@import 'bourbon';

// Main Colors
$accent: null;
$white: #ffffff;
$black: #000000;
$dark-gray: lighten($black, 20%);
$gray: lighten($black, 40%);
$light-gray: lighten($black, 60%);
$lighter-gray: lighten($black, 80%);

// Pen Settings
$accent: #ed2553;
$max-width: 460px;


// Mixins
$level:1;
@mixin materialShadow($level) {
  @if $level == 1 {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  } @else if $level == 2 {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  } @else if $level == 3 {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  } @else if $level == 4 {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  } @else if $level == 5 {
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  }
}

body {
  background: #e9e9e9;
  color: $gray;
  font-family: 'RobotoDraft', 'Roboto', sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Pen Title */
.pen-title {
  padding: 50px 0;
  text-align: center;
  letter-spacing: 2px;
  h1 {
    margin: 0 0 20px;
    font-size: 48px;
    font-weight: 300;
  }
  span {
    font-size: 12px;
    .fa {
      color: $accent;
    }
    a {
      color: $accent;
      font-weight: 600;
      text-decoration: none;
    }
  }
}

/* Container */
.container {
  position: relative;
  max-width: $max-width;
  width: 100%;
  margin: 0 auto 100px;
  &.active {
    .card {
      &:first-child {
        background: darken($white, 5%);
        margin: 0 15px;
      }
      &:nth-child(2) {
        background: darken($white, 2%);
        margin: 0 10px;
      }
      &.alt {
        top: 20px;
        right: 0;
        width: 100%;
        min-width: 100%;
        height: auto;
        border-radius: 5px;
        padding: 60px 0 40px;
        overflow: hidden;
        .toggle {
          position: absolute;
          top: 40px;
          right: -70px;
          box-shadow: none;
          @include transform(scale(10));
          transition: transform .3s ease;
          &:before {
            content: '';
          }
        }
        .title,
        .input-container,
        .button-container {
          left: 0;
          opacity: 1;
          visibility: visible;
          transition: .3s ease;
        }
        .title {
          transition-delay: .3s;
        }
        .input-container {
          transition-delay: .4s;
          &:nth-child(2) {
            transition-delay: .5s;
          }
          &:nth-child(3) {
            transition-delay: .6s;
          }
        }
        .button-container {
          transition-delay: .7s;
        }
      }
    }
  }
}

/* Card */
.card {
  position: relative;
  background: $white;
  border-radius: 5px;
  padding: 60px 0 40px 0;
  box-sizing: border-box;
  @include materialShadow(1);
  transition: .3s ease;
  
  &:first-child {
    background: darken($white, 2%);
    height: 10px;
    border-radius: 5px 5px 0 0;
    margin: 0 10px;
    padding: 0;    
  }
  
  /* Title */
  .title {
    position: relative;
    z-index: 1;
    border-left: 5px solid $accent;
    margin: 0 0 35px;
    padding: 10px 0 10px 50px;
    color: $accent;
    font-size: 32px;
    font-weight: 600;
    text-transform: uppercase;
  }
  
  /* Inputs */
  .input-container {
    position: relative;
    margin: 0 60px 50px;
    input {
      outline: none;
      z-index: 1;
      position: relative;
      background: none;
      width: 100%;
      height: 60px;
      border: 0;
      color: #212121;
      font-size: 24px;
      font-weight: 400;
      &:focus {
        ~ label {
          color: #9d9d9d;
          transform: translate(-12% ,-50%) scale(0.75);
        }
        ~ .bar {
          &:before,
          &:after {
            width: 50%;
          }
        }
      }
      &:valid {
        ~ label {
          color: #9d9d9d;
          transform: translate(-12% ,-50%) scale(0.75);
        }
      }
    }
    label {
      position: absolute;
      top: 0;
      left: 0;
      color: #757575;
      font-size: 24px;
      font-weight: 300;
      line-height: 60px;
      @include transition(.2s ease);
    }
    .bar {
      position: absolute;
      left: 0;
      bottom: 0;
      background: #757575;
      width: 100%;
      height: 1px;
      &:before,
      &:after {
        content:'';
        position: absolute;
        background: $accent;
        width: 0;
        height: 2px;
        transition: .2s ease;
      }
      &:before {
        left: 50%;
      }
      &:after {
        right: 50%;
      }
    }
  }
  /* Button */
  .button-container {
    margin: 0 60px;
    text-align: center;
    button {
      outline: 0;
      cursor: pointer;
      position: relative;
      display: inline-block;
      background: 0;
      width: 240px;
      border: 2px solid #e3e3e3;
      padding: 20px 0;
      font-size: 24px;
      font-weight: 600;
      line-height: 1;
      text-transform: uppercase;
      overflow: hidden;
      transition: .3s ease;
      span {
        position: relative;
        z-index: 1;
        color: #ddd;
        transition: .3s ease;
      }
      &:before {
        content: '';
        position: absolute;
        top: 50%;        
        left: 50%;
        display: block;        
        background: $accent;
        width: 30px;
        height: 30px;
        border-radius: 100%;
        margin: -15px 0 0 -15px;
        opacity: 0;
        transition: .3s ease;
      }
      &:hover,
      &:active,
      &:focus {
        border-color: $accent;
        span {
          color: $accent;
        }
      }
      &:active,
      &:focus {
        span {
          color: $white;
        }
        &:before {
          opacity: 1;
          @include transform(scale(10));
        }
      }
    }
  }
    
  /* Footer */
  .footer {
    margin: 40px 0 0;
    color: #d3d3d3;
    font-size: 24px;
    font-weight: 300;
    text-align: center;
    a {
      color: inherit;
      text-decoration: none;
      transition: .3s ease;
      &:hover {
        color: darken(#d3d3d3, 10%);
      }
    }
  }
  
  /* Alt Card */
  &.alt {
    position: absolute;
    top: 40px;
    right: -70px;
    z-index: 10;
    width: 140px;    
    height: 140px;
    background: none;
    border-radius: 100%;
    box-shadow: none;
    padding: 0;
    transition: .3s ease;
    
    /* Toggle */
    .toggle { 
      background: $accent;
      width: 140px;
      height: 140px;
      border-radius: 100%;
      @include materialShadow(1);
      color: $white;
      font-size: 58px;
      line-height: 140px;
      text-align: center;
      &:before {
        content: '+';
      }
    }
    
    .title,
    .input-container,
    .button-container {
      left: 100px;
      opacity: 0;
      visibility: hidden;   
    }
    
    /* Title */
    .title {
      position: relative;
      border-color: $white;
      color: $white;
      .close {
        cursor: pointer;
        position: absolute;
        top: 0;;        
        right: 60px;
        display: inline;
        color: $white;
        font-size: 58px;
        font-weight: 400;
        &:before {
          content: '\00d7';
        }
      }
    }
    
    /* Input */
    .input-container {
      input {
        color: $white;
        &:focus {
          ~ label {
            color: $white;
          }
          ~ .bar {
            &:before,
            &:after {
              background: $white;
            }
          }
        }
      }
      label {
        color: rgba($white, .8);
      }
      .bar {
        background: rgba($white, .8);
      }
    }

    /* Button */
    .button-container {
      button {
        width: 100%;
        background: $white;
        border-color: $white;
        span {
          color: $accent;
        }
        &:hover {
          background: rgba($white, .9);
        }
        &:active,
        &:focus {
          &:before {
            display: none;
          }
        }
      }
    }
  }
}

// Not Important
.rerun {
  margin: 0 0 30px;
  text-align: center;
  a {
    cursor: pointer;
    display: inline-block;
    background: $accent;
    @include materialShadow(1);
    padding: 10px 20px;
    color: $white;
    text-decoration: none;
    @include transition(.3s ease);
    &:hover {
      @include materialShadow(2);
    }
  }
}
View Compiled
$('.toggle').on('click', function() {
  $('.container').stop().addClass('active');
});

$('.close').on('click', function() {
  $('.container').stop().removeClass('active');
});

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900|RobotoDraft:400,100,300,500,700,900
  2. https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js