<!-- Just place the .button-effect class on each button you want it -->
<div class="container">
  <a href="#" class="button button-effect">Click me</a>
  <a href="#" class="button button-effect">Click me again</a>
  <a href="#" class="button button-effect">No, not him. Click me rather...</a>
</div>

html
  width: 100%
  height: 100%
  
body
  background: linear-gradient(to right, #25c481, #25b7c4)

.container
  position: absolute
  top: 30%
  left: 50%
  transform: translate(-50%)
  width: auto
  max-width: 350px
  
  text-align: left
  
a
  text-decoration: none
  
.button
  position: relative
  padding: 15px 25px
  
  color: yellow
  text-transform: uppercase
  background-color: transparent
  border: 3px solid yellow
  &:hover
    cursor: pointer
  
.button-effect
  display: inline-block
  overflow: hidden
  
.effect-wave
  display: block
  position: absolute
  transform: translateX(-50%) translateY(-50%)
  width: 0px
  height: 0px

  background-color: yellow
  border-radius: 50%
  opacity: 0.5

var animationTiming = 500;

/* Add the class effect on button */
$('.button-effect').on('click', function(e) {
  e.preventDefault();
  var self = $(this),
      /* Get the width of button (if different buttons types) */
      btnWidth = self.outerWidth(),
      x = e.offsetX,
      y = e.offsetY;

  self.prepend('<span class="effect-wave"></span>');

  $('.effect-wave')
    .css({'top': y, 'left': x})
    .animate({
      opacity: '0',
      width: btnWidth * 2,
      height: btnWidth * 2
    }, animationTiming, function() {
     self.find('.effect-wave').remove();
    })
  
})