Sign up & Sign in Form

index.html

<div class="Login-Wrap">
  <div class="Field Field--half">
    <input type="text" id="name" class="Field-text" autocomplete="off" placeholder="Name *" autofocus>
    <label for="name" class="Field-label">Name</label>
  </div>
  <div class="Field Field--half">
    <input type="text" id="surname" class="Field-text" autocomplete="off" placeholder="Lastname *">
    <label for="surname" class="Field-label">Lastname</label>
  </div>
  <div class="Field Field--half">
    <input type="text" id="email" class="Field-text" autocomplete="off" placeholder="Email *">
    <label for="email" class="Field-label">E-mail</label>
  </div>
  <div class="Field Field--half">
    <input type="password" id="password" class="Field-text" autocomplete="off" placeholder="Password *">
    <label for="password" class="Field-label">Password</label>
  </div>
  
  <div class="Login-row">
    <button class="Field-button Field-button--submit">Sign up</button>
  </div>
  
   <div class="Field Field--full">
    <input type="text" id="email2" class="Field-text" autocomplete="off" placeholder="Email *">
    <label for="email2" class="Field-label">E-mail</label>
  </div>
  <div class="Field Field--full">
    <input type="password" id="password2" class="Field-text" autocomplete="off" placeholder="Password *">
    <label for="password2" class="Field-label">Password</label>
  </div>
  
  <div class="Login-row">
    <button class="Field-button Field-button--facebook">Sign in</button>
  </div>
  
</div>

Sign up & Sign in Form.markdown

Sign up & Sign in Form

A Pen by Davilious on CodePen.

License.

style.css

$normal-color: #a8b1b8;
$active-color: #5cadd8;
$field-focus-background: lighten($active-color, 30%);
$base-spacing: 20px;
$green: #7fa743;
$blue: #617db7;


@mixin centered() {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

* {
  box-sizing: border-box;
}

body {
  background: lightgrey;
  font-family: sans-serif;
}

.Login-Wrap {
  @include centered;
  width: 450px;
  height: 490px;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
}

.Field {
  position: relative;
  padding: $base-spacing;
  float: left;
  height: 80px;
}

.Field--half {
  width: 50%;
}

.Field--full {
  width: 100%;
}

.Field-label {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: $base-spacing;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
  overflow: hidden;
  border: 1px solid transparent; 
}

.Field-text {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  border: none;
  padding: $base-spacing;
  height: 40px;
  font-size: 13px;
  width: 100%;
  color: $normal-color;
  border: 1px solid transparent;
  
  &:focus {
    background: $field-focus-background;  
    outline: none;
    border: 1px solid $active-color;
    border-top: 0;
  }
  
  &:focus ~ .Field-label {
   background: $field-focus-background;
   color: $active-color;
   border: 1px solid $active-color;
  }
}

.Field-button {
  width: 100%;
  padding: 15px 30px;
  border: none;
}

.Field-button--submit {
  background: $green;
  box-shadow: inset 0 -5px 0 darken($green, 10%);
  color: white;
}

.Field-button--facebook {
  background: $blue;
  box-shadow: inset 0 -5px 0 darken($blue, 10%);
  color: white;
}

.Login-row {
  width: 100%;
  padding: $base-spacing;
  float: left;
  border-top: 1px solid lighten($normal-color, 20%);
}