MD - INPUT - RIPPLE

HTML

<h1>Material Design Login Screen</h1>

<div class="wrapper center">
  <div class="anim-input ripple" data-ripple-color="#89669b">
    <div class="label">Username</div>
    <input type="text" id="username">
  </div>
  <div class="anim-input ripple" data-ripple-color="#89669b">
    <div class="label">Password</div>
    <input type="password" id="password">
  </div>
    
  <button class="ripple" data-ripple-color="#000">Login</button>
</div>

CSS

input{
	height:35px;
  width:100%;
  font-size:24px;
}

button{
  position: relative;
  border: none;
  outline:none;
  cursor: pointer;
  background: #89669b;
  color: white;
  padding: 18px 60px;
  border-radius: 2px;
  font-size: 22px;
  
  transition: .5s all ease;
  -webkit-box-shadow: 0px 5px 8px #1d1d1d;
}

button:hover{
  -webkit-box-shadow: 0px 10px 18px #333;
}



.wrapper{
	position:relative;
  width:40%;
  margin: 10% auto;
}

/*-------- End Basic Setup ------*/

.anim-input{
  position:relative;
  background:#fff;
  height:35px;
  margin: 10px auto;
  
  border-radius: 4px;
  -webkit-box-shadow: inset 0px 1px 3px #1d1d1d;
}

.anim-input .label{
  position:absolute;
  width:100%;
  z-index:1;
  
  bottom:5px;
  text-align:center;

  cursor: text;
  transition: .4s all ease;
}

.anim-input input{
  position:absolute;
  top:0;
  left:0;
  z-index:2;
  border:none;
  outline:none;
  background:none;
  
  text-align:center;
}

.active-input-anim .label{
  opacity:0;
}

/* Css for ripples */

.ripple{
  overflow:hidden;
}

.ripple-effect{
  position: absolute;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: white;

    
  -webkit-animation: ripple-animation 2s;
}


@-webkit-keyframes ripple-animation {
    from {
      -webkit-transform: scale(1);
      opacity: 0.4;
    }
    to {
      -webkit-transform: scale(100);
      opacity: 0;
    }
}

JavaScript

$("input.anim-input ").each(function(){
    
    $(this).on('focus', function() {
      $(this).parent().addClass('active-input-anim');
    });

    $(this).on('blur', function() {
      if ($(this).val().length == 0) {
        $(this).parent().removeClass('active-input-anim');
      }
    });
  });
  
  // Code for Ripple Effect
  
  $('.ripple').on('click', function (event) {
      event.preventDefault();
      
      var $div = $('<div/>'),
          btnOffset = $(this).offset(),
      		xPos = event.pageX - btnOffset.left,
      		yPos = event.pageY - btnOffset.top;
      

      
      $div.addClass('ripple-effect');
      var $ripple = $(".ripple-effect");
      
      $ripple.css("height", $(this).height());
      $ripple.css("width", $(this).height());
      $div
        .css({
          top: yPos - ($ripple.height()/2),
          left: xPos - ($ripple.width()/2),
          background: $(this).data("ripple-color")
        }) 
        .appendTo($(this));

      window.setTimeout(function(){
        $div.remove();
      }, 2000);
    });