Easily add the Clef wave to any button

clef-wave.js

// tween.js v.0.15.0 https://github.com/sole/tween.js
void 0===Date.now&&(Date.now=function(){return(new Date).valueOf()});var TWEEN=TWEEN||function(){var n=[];return{REVISION:"14",getAll:function(){return n},removeAll:function(){n=[]},add:function(t){n.push(t)},remove:function(t){var r=n.indexOf(t);-1!==r&&n.splice(r,1)},update:function(t){if(0===n.length)return!1;var r=0;for(t=void 0!==t?t:"undefined"!=typeof window&&void 0!==window.performance&&void 0!==window.performance.now?window.performance.now():Date.now();r<n.length;)n[r].update(t)?r++:n.splice(r,1);return!0}}}();TWEEN.Tween=function(n){var t=n,r={},i={},u={},o=1e3,e=0,a=!1,f=!1,c=!1,s=0,h=null,l=TWEEN.Easing.Linear.None,p=TWEEN.Interpolation.Linear,E=[],d=null,v=!1,I=null,w=null,M=null;for(var O in n)r[O]=parseFloat(n[O],10);this.to=function(n,t){return void 0!==t&&(o=t),i=n,this},this.start=function(n){TWEEN.add(this),f=!0,v=!1,h=void 0!==n?n:"undefined"!=typeof window&&void 0!==window.performance&&void 0!==window.performance.now?window.performance.now():Date.now(),h+=s;for(var o in i){if(i[o]instanceof Array){if(0===i[o].length)continue;i[o]=[t[o]].concat(i[o])}r[o]=t[o],r[o]instanceof Array==!1&&(r[o]*=1),u[o]=r[o]||0}return this},this.stop=function(){return f?(TWEEN.remove(this),f=!1,null!==M&&M.call(t),this.stopChainedTweens(),this):this},this.stopChainedTweens=function(){for(var n=0,t=E.length;t>n;n++)E[n].stop()},this.delay=function(n){return s=n,this},this.repeat=function(n){return e=n,this},this.yoyo=function(n){return a=n,this},this.easing=function(n){return l=n,this},this.interpolation=function(n){return p=n,this},this.chain=function(){return E=arguments,this},this.onStart=function(n){return d=n,this},this.onUpdate=function(n){return I=n,this},this.onComplete=function(n){return w=n,this},this.onStop=function(n){return M=n,this},this.update=function(n){var f;if(h>n)return!0;v===!1&&(null!==d&&d.call(t),v=!0);var M=(n-h)/o;M=M>1?1:M;var O=l(M);for(f in i){var m=r[f]||0,N=i[f];N instanceof Array?t[f]=p(N,O):("string"==typeof N&&(N=m+parseFloat(N,10)),"number"==typeof N&&(t[f]=m+(N-m)*O))}if(null!==I&&I.call(t,O),1==M){if(e>0){isFinite(e)&&e--;for(f in u){if("string"==typeof i[f]&&(u[f]=u[f]+parseFloat(i[f],10)),a){var T=u[f];u[f]=i[f],i[f]=T}r[f]=u[f]}return a&&(c=!c),h=n+s,!0}null!==w&&w.call(t);for(var g=0,W=E.length;W>g;g++)E[g].start(n);return!1}return!0}},TWEEN.Easing={Linear:{None:function(n){return n}},Quadratic:{In:function(n){return n*n},Out:function(n){return n*(2-n)},InOut:function(n){return(n*=2)<1?.5*n*n:-.5*(--n*(n-2)-1)}},Cubic:{In:function(n){return n*n*n},Out:function(n){return--n*n*n+1},InOut:function(n){return(n*=2)<1?.5*n*n*n:.5*((n-=2)*n*n+2)}},Quartic:{In:function(n){return n*n*n*n},Out:function(n){return 1- --n*n*n*n},InOut:function(n){return(n*=2)<1?.5*n*n*n*n:-.5*((n-=2)*n*n*n-2)}},Quintic:{In:function(n){return n*n*n*n*n},Out:function(n){return--n*n*n*n*n+1},InOut:function(n){return(n*=2)<1?.5*n*n*n*n*n:.5*((n-=2)*n*n*n*n+2)}},Sinusoidal:{In:function(n){return 1-Math.cos(n*Math.PI/2)},Out:function(n){return Math.sin(n*Math.PI/2)},InOut:function(n){return.5*(1-Math.cos(Math.PI*n))}},Exponential:{In:function(n){return 0===n?0:Math.pow(1024,n-1)},Out:function(n){return 1===n?1:1-Math.pow(2,-10*n)},InOut:function(n){return 0===n?0:1===n?1:(n*=2)<1?.5*Math.pow(1024,n-1):.5*(-Math.pow(2,-10*(n-1))+2)}},Circular:{In:function(n){return 1-Math.sqrt(1-n*n)},Out:function(n){return Math.sqrt(1- --n*n)},InOut:function(n){return(n*=2)<1?-.5*(Math.sqrt(1-n*n)-1):.5*(Math.sqrt(1-(n-=2)*n)+1)}},Elastic:{In:function(n){var t,r=.1,i=.4;return 0===n?0:1===n?1:(!r||1>r?(r=1,t=i/4):t=i*Math.asin(1/r)/(2*Math.PI),-(r*Math.pow(2,10*(n-=1))*Math.sin(2*(n-t)*Math.PI/i)))},Out:function(n){var t,r=.1,i=.4;return 0===n?0:1===n?1:(!r||1>r?(r=1,t=i/4):t=i*Math.asin(1/r)/(2*Math.PI),r*Math.pow(2,-10*n)*Math.sin(2*(n-t)*Math.PI/i)+1)},InOut:function(n){var t,r=.1,i=.4;return 0===n?0:1===n?1:(!r||1>r?(r=1,t=i/4):t=i*Math.asin(1/r)/(2*Math.PI),(n*=2)<1?-.5*r*Math.pow(2,10*(n-=1))*Math.sin(2*(n-t)*Math.PI/i):r*Math.pow(2,-10*(n-=1))*Math.sin(2*(n-t)*Math.PI/i)*.5+1)}},Back:{In:function(n){var t=1.70158;return n*n*((t+1)*n-t)},Out:function(n){var t=1.70158;return--n*n*((t+1)*n+t)+1},InOut:function(n){var t=2.5949095;return(n*=2)<1?.5*n*n*((t+1)*n-t):.5*((n-=2)*n*((t+1)*n+t)+2)}},Bounce:{In:function(n){return 1-TWEEN.Easing.Bounce.Out(1-n)},Out:function(n){return 1/2.75>n?7.5625*n*n:2/2.75>n?7.5625*(n-=1.5/2.75)*n+.75:2.5/2.75>n?7.5625*(n-=2.25/2.75)*n+.9375:7.5625*(n-=2.625/2.75)*n+.984375},InOut:function(n){return.5>n?.5*TWEEN.Easing.Bounce.In(2*n):.5*TWEEN.Easing.Bounce.Out(2*n-1)+.5}}},TWEEN.Interpolation={Linear:function(n,t){var r=n.length-1,i=r*t,u=Math.floor(i),o=TWEEN.Interpolation.Utils.Linear;return 0>t?o(n[0],n[1],i):t>1?o(n[r],n[r-1],r-i):o(n[u],n[u+1>r?r:u+1],i-u)},Bezier:function(n,t){var r,i=0,u=n.length-1,o=Math.pow,e=TWEEN.Interpolation.Utils.Bernstein;for(r=0;u>=r;r++)i+=o(1-t,u-r)*o(t,r)*n[r]*e(u,r);return i},CatmullRom:function(n,t){var r=n.length-1,i=r*t,u=Math.floor(i),o=TWEEN.Interpolation.Utils.CatmullRom;return n[0]===n[r]?(0>t&&(u=Math.floor(i=r*(1+t))),o(n[(u-1+r)%r],n[u],n[(u+1)%r],n[(u+2)%r],i-u)):0>t?n[0]-(o(n[0],n[0],n[1],n[1],-i)-n[0]):t>1?n[r]-(o(n[r],n[r],n[r-1],n[r-1],i-r)-n[r]):o(n[u?u-1:0],n[u],n[u+1>r?r:u+1],n[u+2>r?r:u+2],i-u)},Utils:{Linear:function(n,t,r){return(t-n)*r+n},Bernstein:function(n,t){var r=TWEEN.Interpolation.Utils.Factorial;return r(n)/r(t)/r(n-t)},Factorial:function(){var n=[1];return function(t){var r,i=1;if(n[t])return n[t];for(r=t;r>1;r--)i*=r;return n[t]=i}}(),CatmullRom:function(n,t,r,i,u){var o=.5*(r-n),e=.5*(i-t),a=u*u,f=u*a;return(2*t-2*r+o+e)*f+(-3*t+3*r-2*o-e)*a+o*u+t}}},"undefined"!=typeof module&&module.exports&&(module.exports=TWEEN);


(function() {

  var getPixelRatio = function() {
    var bsr, ctx, dpr;
    ctx = document.createElement("canvas").getContext("2d");
    dpr = window.devicePixelRatio || 1;
    bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
    return dpr / bsr;
  };

  var createHiDPICanvas = function(width, height) {
    var canvas, ratio;
    ratio = getPixelRatio();
    canvas = document.createElement("canvas");
    canvas.width = width * ratio;
    canvas.height = height * ratio;
    canvas.style.width = width + "px";
    canvas.style.height = height + "px";
    canvas.getContext("2d").setTransform(ratio, 0, 0, ratio, 0, 0);
    return canvas;
  };


  function Button(options) {
    this.options = options;
    this.drawWave();
  }

  Button.prototype.BARS = [
    {
      width: 2,
      height: 17,
      padding: 2,
      random: .9
    }, {
      width: 2,
      height: 16,
      padding: 2,
      random: .8
    }, {
      width: 2,
      height: 15,
      padding: 2,
      random: .7
    }, {
      width: 2,
      height: 14,
      padding: 2,
      random: .6
    }, {
      width: 2,
      height: 13,
      padding: 2,
      random: .5
    }
  ];

  Button.prototype._addCanvas = function() {
    var canvas;
    canvas = createHiDPICanvas(34, 34);
    return this.options.el.appendChild(canvas);
  };

  Button.prototype._getColor = function() {
    if (this.options.color === "white") {
      return "#0D9DDB";
    }
    return "#fff";
  };

  Button.prototype._paint = function(canvas, options) {
    var bar, barsWidth, ctx, height, leftPadding, width, x, _i, _j, _len, _len1, _ref, _ref1, _results;
    height = canvas.scrollHeight;
    width = canvas.scrollWidth;
    ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, width, height);
    ctx.fillStyle = options.color;
    barsWidth = 0;
    _ref = this.BARS;
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
      bar = _ref[_i];
      barsWidth += bar.width + bar.padding;
    }
    leftPadding = (width - barsWidth) / 2;
    x = leftPadding;
    _ref1 = this.BARS;
    _results = [];
    for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
      bar = _ref1[_j];
      ctx.fillRect(x, bar.y, bar.width, bar.height);
      _results.push(x += bar.width + bar.padding);
    }
    return _results;
  };

  Button.prototype.drawWave = function() {
    var bar, canvas, run, _fn, _i, _len, _ref;
    canvas = this._addCanvas();
    _ref = this.BARS;
    _fn = function(bar) {
      var offset, toY;
      offset = 6;
      bar.y = offset;
      toY = (canvas.scrollHeight - bar.height) - offset;
      return new TWEEN.Tween({
        y: bar.y
      }).to({
        y: toY
      }, 2000 * bar.random).easing(TWEEN.Easing.Quadratic.InOut).repeat(Infinity).yoyo(true).onUpdate(function() {
        return bar.y = this.y;
      }).start();
    };
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
      bar = _ref[_i];
      _fn(bar);
    }
    run = (function(_this) {
      return function() {
        _this._paint(canvas, {
          color: _this._getColor()
        });
        window.requestAnimationFrame(run);
        return TWEEN.update();
      };
    })(this);
    return run();
  };

  Button.prototype._resetLoadingBars = function() {
    var bar, _i, _len, _ref, _results;
    clearInterval(this.loadingTimeout);
    this.shouldResetBars = false;
    _ref = this.BARS;
    _results = [];
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
      bar = _ref[_i];
      if (bar.originalWidth) {
        bar.width = bar.originalWidth;
      }
      _results.push(bar.originalWidth = null);
    }
    return _results;
  };

  Button.prototype.startLoadingWave = function() {
    var INCREMENT, TIMEOUT, barIndex, _increaseBarSize;
    return;
    if (this.loadingAnimationRunning) {
      return;
    }
    barIndex = 0;
    INCREMENT = 2;
    TIMEOUT = 200;
    _increaseBarSize = (function(_this) {
      return function() {
        var previousBarIndex;
        if (barIndex === _this.BARS.length && _this.shouldResetBars) {
          return _this._resetLoadingBars();
        }
        if (barIndex >= _this.BARS.length) {
          barIndex = 0;
        }
        _this.BARS[barIndex].originalWidth = _this.BARS[barIndex].width;
        _this.BARS[barIndex].width += INCREMENT;
        previousBarIndex = barIndex === 0 ? _this.BARS.length - 1 : barIndex - 1;
        if (_this.BARS[previousBarIndex].originalWidth) {
          _this.BARS[previousBarIndex].width = _this.BARS[previousBarIndex].originalWidth;
        }
        return barIndex++;
      };
    })(this);
    _increaseBarSize();
    return this.loadingTimeout = setInterval(_increaseBarSize, TIMEOUT);
  };

  Button.prototype.stopLoadingWave = function() {
    return;
    return this.shouldResetBars = true;
  };

  // Change this to make the Wave appear
  // on any sort of button you like.
  $(document).ready(function() {
    $('.clef-button').each(function() {
      new Button({ el: this });
    })
  });

})();

If you want to see an example of this, check out this CodePen.