Material design ui button

by jose manuel vidal jimenez

HTML

<button class="btn c2">Submit Request</button>

CSS

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);


.c2{
  background: #e74c3c;
}

.btn {
  position: relative;
  float:left;
  padding:10px 20px;
  border-radius: 2px;
  margin: 10px 5px;
  line-height:20px;
  font-size:16px;
  overflow: hidden;
  color: #fff;
  border: none;
  text-decoration:none;
  font-weight:normal;
  font-style:normal;
  cursor:pointer;
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.25s cubic-bezier(0.2, 0.7, 0.4, 1);
          transition: all 0.25s cubic-bezier(0.2, 0.7, 0.4, 1);
}
.btn.clicked {
  box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.3);
}

.btn-circle {
  display: block;
  position: absolute;
  background: rgba(255,255,255,0.5);
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  border-radius: 50%;
  opacity: 0.5;
  -webkit-animation: btn-circle 0.5s ease-in forwards;
          animation: btn-circle 0.5s ease-in forwards;
}


@-webkit-keyframes btn-circle {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    -webkit-transform: scale(2);
            transform: scale(2);
  }
}

@keyframes btn-circle {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    -webkit-transform: scale(2);
            transform: scale(2);
  }
}

JavaScript

$('.btn').on('click', function(e){
  e.preventDefault();
  var $this = $(this),
      offset = $this.offset(),
      offsetY = (e.pageY - offset.top),
      offsetX = (e.pageX - offset.left);

  $this.addClass('clicked').append(
    $('<span class="btn-circle"></span>')
      .css({
        'top' : offsetY,
        'left' : offsetX
      })
  );
})

$('.btn').on('mouseup', function(e){
  e.preventDefault();
  var $this = $(this);
  
  $this.removeClass('clicked')
    .children().fadeOut(function(){
      $(this).remove();
    });
});