<!-- 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>
  width: 100%
  height: 100%
  background: linear-gradient(to right, #25c481, #25b7c4)

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

  background-color: yellow
  border-radius: 50%
  opacity: 0.5
View Compiled
var animationTiming = 500;

/* Add the class effect on button */
$('.button-effect').on('click', function(e) {
  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>');

    .css({'top': y, 'left': x})
      opacity: '0',
      width: btnWidth * 2,
      height: btnWidth * 2
    }, animationTiming, function() {
Run Pen

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