SASS Animated Form Labels

index.html

<form class="awesome-form">
  
  <div class="input-group">
    <input type="text">
    <label>Your Full Name</label>
  </div>
  
  <div class="input-group">
    <input type="email">
    <label>Your Email Address</label>
  </div>
  
  <input type="submit">
</form>

sass-animated-form-labels.markdown

SASS Animated Form Labels

A Pen by Eric on CodePen.

License.

script.js

$(function(){
  
  $('.awesome-form .input-group input').focusout(function(){
    
    var text_val = $(this).val();
    
    if(text_val === "") {
      
      $(this).removeClass('has-value');
      
    } else {
      
      $(this).addClass('has-value');
      
    }
    
  });
  
});

scripts

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

style.sass

@import bourbon

body
  padding: 100px
  -webkit-font-smoothing: antialiased

input
  background: none
  border: solid 2px #21a1e1
  color: #21a1e1
  padding: 15px 40px
  font-size: 18px
  display: inline-block
  
  &:focus,
  &:active
    outline: none
  
  &[type="text"],
  &[type="email"]
    border: none
    border-bottom: solid 2px #21a1e1
  
  &[type="submit"]
    &:active
      color: white
      background: #21a1e1
    
 
.input-group
  display: inline-block
  margin-right: 20px
  position: relative
  
  input
    padding: 15px 0px
  
  label
    +position(absolute, 50% null null 0px)
    +transform(translateY(-50%))
    font:
      family: $georgia
      style: italic
      size: 18px
    color: #999
    pointer-events: none
    +transition
   
  input:focus + label,
  input.has-value + label
    top: -10px
    font-size: 12px
    color: #aaa