Button ripple

by satantx

HTML

<span class="button">Подписаться на новости</span>

CSS

.button {
  display: inline-block;
  vertical-align: top;
  line-height: 35px;
  text-align: center;
  border-radius: 2px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  background: #0F7CAA;
  padding: 0 15px;
  overflow: hidden;
  -webkit-appearance: none;
  user-select: none;
  position:relative;
  z-index: 2;
}

.waves-ripple {
  width: 20px;
  height: 20px;
  background-color: #fff;
  opacity: .2;
  position: absolute;
  border-radius: 100%;
  pointer-events: none;
  transition: all 0.5s linear;
}

JavaScript

// wave effect
	$('.button').mousedown(function(e){

		var el = $(this);

		$('.waves-ripple').remove();

		el.append("<div class='waves-ripple'></div>");

		var ripple = $('.waves-ripple', el),
			 pos = el.offset(),
			 relativeY = e.pageY - pos.top,
			 relativeX = e.pageX - pos.left,
       width = el.innerWidth() * 2;

      ripple.css({
         'top': relativeY+'px',
         'left': relativeX+'px',
         'width': width,
         'height': width,
         'opacity': .2,
         'marginLeft': -width/2,
         'marginTop': -width/2
      });

	});	

	$('.button').on('mouseup mouseleave', function(e){
		$('.waves-ripple').css({
			'opacity': 0
		});
	});