Bootstrap - input button ripple effect

Bootstrap - input button ripple effect

by Ayyappan Sakthivadivel

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<input class="btn btn-primary ripple-effect" value="test ripple" type="submit" />
<a class="btn btn-primary ripple-effect">link ripple</a>

CSS

body {
  background-color: #000;
}


/* box styling */

.btn {
  margin-bottom: 2em;
  cursor: pointer;
  content: '';
}


/* Ripple effect */

@-webkit-keyframes ripple-animation {
  0% {
    -webkit-transform: scale(.01);
    transform: scale(.01);
  }
  100% {
    -webkit-transform: scale(5);
    transform: scale(5);
  }
}

@keyframes ripple-animation {
  0% {
    -webkit-transform: scale(.01);
    transform: scale(.01);
  }
  100% {
    -webkit-transform: scale(5);
    transform: scale(5);
  }
}

JavaScript

$('body').on('click', '.ripple-effect', function(e) {
  // Cache the selector
  var the_dom = $(this);

  // Sometimes the clicked element != the limit of the ripple effect. We'll talk about it later below
  var the_dom_limit = the_dom;

  // Get the click and the clicked element offsets
  var the_dom_offset = the_dom_limit.offset();
  var click_x = e.pageX;
  var click_y = e.pageY;

  // Get the width and the height of clicked element
  var the_dom_width = the_dom_limit.outerWidth();
  var the_dom_height = the_dom_limit.outerHeight();

  // Draw the ripple effect wrap
  var ripple_effect_wrap = $('<span class="ripple-effect-wrap"></span>');
  ripple_effect_wrap.css({
    'width': the_dom_width,
    'height': the_dom_height,
    'position': 'absolute',
    'top': the_dom_offset.top,
    'left': the_dom_offset.left,
    'z-index': 100,
    'overflow': 'hidden',
    'background-clip': 'padding-box'
  });

  // Append the ripple effect wrap
  ripple_effect_wrap.appendTo('body');

  // Determine the position of the click relative to the clicked element
  var click_x_ripple = click_x - the_dom_offset.left;
  var click_y_ripple = click_y - the_dom_offset.top;
  var circular_width = 100;

  // Draw the ripple effect
  var ripple = $('<span class="ripple"></span>');
  ripple.css({
    'width': circular_width,
    'height': circular_width,
    'background': 'rgba(240,240,240,0.4)',
    'position': 'absolute',
    'top': click_y_ripple - (circular_width / 2),
    'left': click_x_ripple - (circular_width / 2),
    'content': '',
    'background-clip': 'padding-box',
    '-webkit-border-radius': '90%',
    'border-radius': '90%',
    '-webkit-animation-name': 'ripple-animation',
    'animation-name': 'ripple-animation',
    '-webkit-animation-duration': '2s',
    'animation-duration': '2s',
    '-webkit-animation-fill-mode': 'both',
    'animation-fill-mode': 'both'
  });
  $('.ripple-effect-wrap:last').append(ripple);

  // Remove rippling component after half second
 ...