Login Form ( Only CSS )

index.pug

.container
   input(type="radio" name="tab" id="signin" checked)
   input(type="radio" name="tab" id="register")
   .pages
      .page
         .input
            .title #[i.material-icons account_box] USERNAME
            input.text(type="text" placeholder="")
         .input
            .title #[i.material-icons lock] PASSWORD
            input.text(type="password" placeholder="")
         .input
            input(type="submit" value="ENTER")
      .page.signup
         .input
            .title #[i.material-icons person] NAME
            input.text(type="text" placeholder="")
         .input
            .title #[i.material-icons markunread_mailbox] EMAIL
            input.text(type="password" placeholder="")
         .input
            input(type="submit" value="SIGN ME UP!")
   .tabs
      label.tab(for="signin") #[.text Sign In]
      label.tab(for="register") #[.text Register]

login-form-only-css.markdown

Login Form ( Only CSS )

A Pen by Sean Codes on CodePen.

License.

script.js

// Demo or didn't happen

var signin = document.querySelector('#signin')
var register = document.querySelector('#register')
setTimeout(function(){ register.checked = true}, 1000)
setTimeout(function(){ signin.checked = true}, 2000)

style.scss

html, body{
   padding:0px;
   margin:0px;
   background:#F8F2ED;
   font-family: 'Raleway', sans-serif;
   color:#FFF;
   height:100%;
}

.container{
   min-height:300px;
   max-width:250px;
   margin:40px auto;
   background:#FFF;
   border-radius:2px;
   box-shadow:0px 2px 3px rgba(0, 0, 0, 0.2);
   display:flex;
   flex-direction:column;
   overflow:hidden;
   animation: hi 0.5s;
   -webkit-transform: translateZ(0px);
   *{
      box-sizing:border-box;
   }
}

.pages{
   flex:1;
   white-space:nowrap;
   position:relative;
   transition:all 0.4s;
   display:flex;
   .page{
      min-width:100%;
      padding:20px 15px;
      padding-top:0px;
      background:linear-gradient(to left, #955DFF, #6FAAFF);
      &:nth-of-type(1){
         .input { transform:translateX(-100%) scale(0.5); }
      }
      &:nth-of-type(2){
         .input { transform:translateX(100%) scale(0.5); }
         
      }
      .input{
         transition:all 1s; 
         opacity:0; 
         transition-delay:0s;
         
      }
      &.signup{
         background:linear-gradient(to left, #6FAAFF, #955DFF);
      }
      .title{
         margin-bottom:10px;
         font-size:14px;
         position:relative;
         line-height:14px;
         i{
            vertical-align:text-bottom;
            font-size:19px;
         }
      }
      .input{
         margin-top:20px;
      }
      input.text{
         background:#F6F7F9;
         border:none;
         border-radius:4px;
         width:100%;
         height:40px;
         line-height:40px;
         padding:0px 10px;
         color:rgba(0, 0, 0, 0.5);
         outline:none;
      }
      
      input[type=submit]{
         background:rgba(0, 0, 0, 0.5);
         color:#F6F7F9;
         height:40px;
         line-height:40px;
         width:100%;
         border:none;
         border-radius:4px;
         font-weight:600;
      }
   }
}

.tabs{
   max-height:50px;
   height:50px;
   display:flex;
   background:#FFF;
   
   .tab{
      flex:1;
      color:#5D708A;
      text-align:center;
      line-height:50px;
      transition:all 0.2s;
      .text{
         font-size:14px;
         transform:scale(1);
         transition:all 0.2s;
      }
   }  
}

input[type=radio]{ display:none; }
@for $i from 0 through 1{
   input[type=radio]:nth-of-type(#{$i + 1}):checked {
      ~ .tabs .tab:nth-of-type(#{$i + 1}){
         box-shadow:inset (6 * $i) + -3px 2px 5px rgba(0, 0, 0, 0.25);
         color:#3F4C7F;
         .text{ transform:scale(0.9); }
      }
      
      ~ .pages{
         transform:translateX(-100% * $i);
         
         .page:nth-of-type(#{$i + 1}){
            .input { 
               opacity:1; 
               transform:translateX(0%); 
               transition:all 0.5s;
               @for $i from 1 through 5{
                  &:nth-child(#{$i}) { 
                     transition-delay:0.2s*$i
                  }
               }
            }
         }
      }
   }
}

@keyframes hi{
   from { transform: translateY(50%) scale(0, 0); opacity:0; }
}

styles

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" />