クリック時に波状に広がるマテリアル風なボタンをCSSとJavaScriptで表現

2018年1月5日2021年11月26日

はにわまん

マテリアルデザインでよく見るボタンです

クリック時に波状に広がるボタンの作り方です。

ボタン

<div class="btn-wave">ボタン</div>

.btn-wave {
  display: inline-block;
  padding: .6em 2em;
  background-image: none;
  background-color: #4CAF50;
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  -webkit-appearance: none;
  position: relative;
  box-shadow: 1px 1px 3px 0 rgba(0,0,0,.2);
  width: 100%;
  overflow: hidden;
}

.ripple {
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 0.4);
  opacity: 1;
  transform: scale(0);
}
.ripple-animation {
  animation: ripple .6s linear;
}
@keyframes ripple {
  100% {
	opacity: 0;
	transform: scale(2);
  }
}

jQuery(function($) {
	$('.btn-wave').on('click', function(e) {

		var wave_width = $(this).width(),
			wave_height = $(this).height(),
			wave_x = $(this).offset().left,
			wave_y = $(this).offset().top;

		// 大きい方の幅に合わせる
		var size = wave_width >= wave_height ? wave_width : wave_height;

		// 波紋要素を追加
		$(this).prepend('<div class="ripple"></div>');

		// 中心座標を算出
		var x = e.pageX - wave_x - size / 2,
			y = e.pageY - wave_y - size / 2;

		$('.ripple').css({
			width: size,
			height: size,
			top: y + 'px',
			left: x + 'px'
		}).addClass('ripple-animation');
	});
});