<link href='https://fonts.googleapis.com/css?family=Raleway:700,100,400,300' rel='stylesheet' type='text/css'>
<section>
  <h1>Touch feedback<br>button</h1>
  <a href="#" class="button button-black js-effect">Touch</a>
  <a href="#" class="button button-white js-touch-effect">Touch</a>
</section>
html,body{
  height:100%;
  display: block;
}

body{
   font-family: 'Raleway', sans-serif;
}

h1 {
  text-align: center;
  letter-spacing: 2px;
  font-weight: 300;
  font-size:70px;
}

.button {
  font-size:20px;
  text-align: center;
  display: block;
  width: 300px;
  margin: auto;
  padding: 15px 0px;
  text-decoration: none;
  letter-spacing: 2px;
  font-weight: 300;
  margin-bottom: 40px;
  overflow: hidden;
  position: relative;
  border-radius:3px;
  transition:box-shadow 0.3s;
  -webkit-box-shadow: 0px 5px 8px rgba(0,0,0,0.2);
  span{
    display: block;
    border-radius:50%;
    width: 50px;
    height: 50px;
    margin-left: -25px;
    margin-top: -25px;
    position:absolute;
    -webkit-animation: effect-animation 2s;
  }
  &:hover{
    -webkit-box-shadow: 0px 5px 15px rgba(0,0,0,0.6);
  }
}

.button-black{
  background: #000;
  color: #fff;
  span{
    background: #fff;
    left:50%;
    top:50%;
    }
}

.button-white{
  background: #fff;
  color: #000;
  border:2px solid #000;
  span{
    background: #000;
    }
}

@-webkit-keyframes effect-animation {
    from {
      -webkit-transform: scale(1);
      opacity: 0.4;
    }
    to {
      -webkit-transform: scale(100);
      opacity: 0;
    }
}
View Compiled
//変数定義
var $window = window;

//black
function buttonEffect(){
  var $buttonEffect = $('.js-effect');

//button押した時の挙動
  $buttonEffect.on('click',function(e){
    e.preventDefault();
    
    $(this).append('<span></span>');
      
    var $span = $(this).find('span');
      
    $window.setTimeout(function(){
      $span.remove();
    },1800);
                         
  });
}

buttonEffect();

//white
function buttonTouchEffect(){
  var $buttonTouchEffect = $('.js-touch-effect');

//button押した時の挙動
  $buttonTouchEffect.on('click',function(e){
    e.preventDefault();
    
    $(this).append('<span></span>');
    var $span = $(this).find('span'),
        offSet = $(this).offset(),
        offSetY = event.pageY-offSet.top,
        offSetX = event.pageX-offSet.left;
    
    console.log(offSetY,offSetX)
    $span.css({
      top:offSetY,
      left:offSetX
    });
      
      $window.setTimeout(function(){
      $span.remove();
    },1800);
                         
  });
}

buttonTouchEffect();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js