Completed Animated Form

Completed Animated Form.markdown

Completed Animated Form

A Pen by Robert Campion on CodePen.

License.

index.html

<form>
  <label>
    <input type="text" required />
    <div class="label-text">First name</div>
  </label>
  <label>
    <input type="text" required />
    <div class="label-text">Last name</div>
  </label>
  <button>Submit</button>
</form>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import "compass"

$mineShaft: #333333
$tundora: #4A4A4A
$dustyGray: #9B9B9B
$gallery: #F0F0F0

body
  background-color: $mineShaft
  font-family: 'Open Sans', Helvetica

form
  text-align: center
  
label
  display: block
  letter-spacing: 4px
  padding-top: 30px
  text-align: center

  .label-text
    color: $dustyGray
    cursor: text
    font-size: 20px
    line-height: 20px
    text-transform: uppercase
    +transform(translateY(-34px))
    transition: all 0.3s
    
  input
    background-color: transparent
    border: 0
    border-bottom: 2px solid $tundora
    color: white
    font-size: 36px
    letter-spacing: -1px
    outline: 0
    padding: 5px 20px
    text-align: center
    transition: all 0.3s
    width: 200px
    
    &:focus 
      max-width: 100px
      width: 400px
    
      & + .label-text
        color: $gallery
        font-size: 13px
        +transform(translateY(-74px))
      
    &:valid + .label-text
      font-size: 13px
      +transform(translateY(-74px))
      
button
  background-color: $mineShaft
  border: 2px solid white
  border-radius: 27px
  color: white
  cursor: pointer
  font-size: 20px
  margin-top: 20px
  padding: 15px 30px
  text-transform: uppercase
  transition: all 200ms
  
  &:hover, &:focus
    background-color: white
    color: $mineShaft
    outline: 0

styles

<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />