波紋が広がるリップルエフェクトボタンの作り方（CSS・Javascript）を参考に jQuery にしてリップルエフェクトボタンをやってみました。

ripple-effect.js

// クラス名rippleの要素を取得
var ripples = $('.ripple');

// クラス名rippleの要素があるかの判定
if ( ripples[0] ) {

	// クリックされた際の処理
	ripples.on('click', function(event) {
		offset = $(this).offset(); // 絶対座標の取得
		w      = $(this).outerWidth(); // 要素の幅を取得
		x      = event.pageX - offset.left - (w / 2);　// リップルの要素の X 座標を設定
		y      = event.pageY - offset.top - (w / 2);　// リップルの要素の Y 座標を設定
		// リップルの要素を設定
		html   = $('<span>').css({
			'top'    : y,
			'left'   : x,
			'width'  : w,
			'height' : w
		}).addClass('rp-effect').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
			// css の animation が終わったら各リップルの要素を削除
			$(this).remove();
		})
		// リップルの要素を追加
		$(this).append(html);
	});
}

後は参考サイトの、CSS と HTML を参考に作っていけば終わりです。