<!-- this is the markup, keep your hands off! -->

<form>
  <label for="email">Subscribe to our mailing list</label>
  <input type="email" value="" name="email" placeholder="email address" required>
  <input type="submit" value="Subscribe" name="subscribe">
</form>

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700)

html, body
  background: #fbfbfb
  height: 100%
  width: 100%
  -webkit-font-smoothing: antialiased
  
form
  animation-name: scaleanimation
  animation-duration: .3s
  background: white
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1)
  left: 50%
  position: absolute
  top: 50%
  transform: translate(-50%,-50%)
  width: 400px

  label
    border-top: 2px solid #3498db
    border-bottom: 1px solid rgba(0,0,0,0.1)
    color: #2c3e50
    display: block
    font-family: 'Lato', 'Helvetica' ,sans-serif
    font-weight: 400
    font-size: 18px
    height: 60px
    float: none
    line-height: 60px
    letter-spacing: .05em
    text-align: center
    text-transform: uppercase
    width: 100%
    
  input[type="email"]
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 98%, #3498db 2%)
    background-size: 0% 100%
    background-repeat: no-repeat
    border: none
    //border: 1px solid red
    border-bottom: 1px solid rgba(0,0,0,0.1)
    border-radius: 0
    color: #2c3e50
    font-family: 'Lato', 'Helvetica' ,sans-serif
    font-size: 20px
    font-weight: 400
    height: 45px
    margin: 50px 5%
    outline: none
    padding: 0
    transition: all .2s ease
    width: 90%
    
    &::placeholder
      color: rgba(0,0,0,.5)
      font-family: 'Lato', 'Helvetica' ,sans-serif
      font-size: 14px
      font-weight: 400
      letter-spacing: .8px
      transition: all .2s ease
      backface-visibility: hidden
      perspective: 1000
      text-transform: uppercase
      visibility: visible!important

    &.hasValue, &:focus
      background-size: 100% 100%

      &::placeholder
        color: rgba(0,0,0,.7)
        transform: translate3d(0%, -135%, 0)
    
  input[type="submit"]
    background: #fbfbfb
    border: none
    cursor: pointer
    color: #333
    float: left
    font-family: 'Lato', 'Helvetica' ,sans-serif
    font-size: 16px
    height: 70px
    letter-spacing: .8px
    line-height: 70px
    margin: 0
    padding: 0
    position: relative
    text-align: center
    transition: all .3s ease-out
    text-transform: uppercase
    overflow: hidden
    width: 100%
    
    &:hover
      background: #34495e
      color: white
    
    
@keyframes scaleanimation
  0%
    opacity: 0
    transform: translate(-50%,-50%) scale(1.5,1.5)
  100% 
    opacity: 1
    transform: translate(-50%,-50%) scale(1,1)

    
    

  $("input[type='email']").blur(function(){
    
    if($(this).val() !== ''){
      $(this).addClass('hasValue');
    }else{
      $(this).removeClass('hasValue');
    }
    
  });