4 SVG-based material Design-style button click-Wave effects

Svgripples is a very cool SVG-based material design-style button that clicks on the baud effect. There are 4 different effects for this point button: circular wave, circular gradient wave, polygon wave and linear gradient wave. The special effects are combined by tweenmax.js and SVG to create a stunning click-wave effect.

Online preview Source Download

How to makeHTML Structure

The button-click Wave uses the SVG element code very simply. An element is used in SVG <symbol> -it is used to define reusable symbols. and <symbol> Place the desired SVG graphic in the element.

12345678

<div style="height: 0; width: 0; position: absolute; visibility: hidden;" aria-hidden="true">  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"            xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false">    <symbol id="ripply-scott" viewBox="0 0 100 100">      <circle id="ripple-shape" cx="1" cy="1" r="1"/>    </symbol>  </svg></div>

To use the element defined above <symbol> , the element is used on the button <use> -it can reuse a predefined SVG graphic multiple times in an SVG image. It uses xlink:href attributes to point to the ID of the element that was previously defined <symbol> .

123456

<button id="js-ripple-btn" class="button styl-material">  Click for Ripple  <svg class="ripple-obj" id="js-ripple">    <use width="100" height="100" xlink:href="#ripply-scott" class="js-ripple"></use>  </svg></button>

CSS Styles

The main CSS style of the Click Wave is only two sentences:

1234567891011121314

.ripple-obj {  height: 100%;  pointer-events: none;  position: absolute;  top: 0;  left: 0;  z-index: 0;  width: 100%;  fill: #0c7cd5;}.ripple-obj use {  opacity: 0;}

Because only a .ripple-obj click-Wave effect is generated on the parent element, it is used pointer-events: none; to prevent the click-Wave from being generated on the SVG.

The click Wave is not visible at the beginning, so set its opacity to 0. The waveform object is also placed in the upper-left corner of the button.

JAVASCRIPT

In order to make the dynamic button click Wave Effect, the special effects use Greensock's Tweenmax library to make SVG animations. The rippleAnimation() function is the main animation function for the entire hit-wave effect.

123456789101112131415161718192021222324252627282930313233343536

function rippleAnimation(event, timing) {    var tl           = new TimelineMax();        x            = event.offsetX,        y            = event.offsetY,        w            = event.target.offsetWidth,        h            = event.target.offsetHeight,        offsetX      = Math.abs( (w / 2) - x ),        offsetY      = Math.abs( (h / 2) - y ),        deltaX       = (w / 2) + offsetX,        deltaY       = (h / 2) + offsetY,        scale_ratio  = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));    tl.fromTo(ripple, timing, {      x: x,      y: y,      transformOrigin: ‘50% 50%‘,      scale: 0,      opacity: 1,      ease: Linear.easeIn    },{      scale: scale_ratio,      opacity: 0    });    return tl;  }  return {    init: function(target, timing) {      var button = document.getElementById(target);      button.addEventListener(‘click‘, function(event) {        rippleAnimation.call(this, event, timing);      });    }  };})();

4 SVG-based material Design-style button click-Wave effects