Material design ui button

by Nikhil krishnan

HTML

<h1>Material ui button</h1>
<a href="#" class="btn c1">Read More</a>
<button class="btn c2">Submit Request</button>
<a href="#" class="btn c3">Open</a>
<button class="btn c4">Send</button>

CSS

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
  margin: 50px 0;
  padding: 0;
  background: #48a2df;
  font-family: 'Open Sans', sans-serif;
}
h1 {
  font-size: 40px;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  color: #2c3e50;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.1);
  text-align: center;
  margin-bottom: 50px;
  text-transform: uppercase;
}
.c1{
  background: #8e44ad;
}
.c2{
  background: #e74c3c;
}
.c3{
  background: #f1c40f;
}
.c4{
  background: #34495e;
}
.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: #999;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  border-radius: 50%;
  opacity: 0.25;
  -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('mousedown', 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
      })
  );
}).on('mouseup mouseout', function(e){
  e.preventDefault();
  var $this = $(this);
  
  $this.removeClass('clicked')
    .children().fadeOut(function(){
      $(this).remove();
    });
});