MD - CUSTOM RIPPLE - BUTTONS - FAVS

by bizamajig

HTML

<div>
  <button class="raised">Button</button>
  <button class="raised edge">Edge</button>
  <button class="flat">Flat</button>
  <button class="float"><i class="fa fa-star"></i></button>
  <button class="float edge"><i class="fa fa-star"></i></button>
</div><br/>
<div class="card">
  <h1>Title</h1>
  <p>Text <br> More Text</p>
  <div class="hr"></div>
  <button class="flat right">Info</button>
</div>

CSS

body {
  font-family: 'Roboto';
  background: #f2f2f2;
  color: rgba(0, 0, 0, 0.85);
}

@-webkit-keyframes ink-visual-show {
  from {
    opacity: 1;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes ink-visual-show {
  from {
    opacity: 1;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes ink-visual-hide {
  to {
    opacity: 0;
  }
}
@keyframes ink-visual-hide {
  to {
    opacity: 0;
  }
}
button {
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
  -webkit-transition-timing-function: cubic-bezier(0.25, 0.5, 0.5, 1);
          transition-timing-function: cubic-bezier(0.25, 0.5, 0.5, 1);
  position: relative;
  padding: 0;
  height: auto;
  border: none;
  border-radius: 2px;
  outline: none;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Roboto';
  line-height: 1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.73);
}
button:active {
  -webkit-transition-duration: 0.1s;
          transition-duration: 0.1s;
}
button .btn {
  position: relative;
  padding: 8px 16px;
  z-index: 2;
}
button .ink-visual-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2px;
  z-index: 1;
}
button .ink-visual-container .ink-visual-static {
  position: static;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2px;
}
button .ink-visual-container .ink-visual {
  -webkit-animation: ink-visual-show 0.25s cubic-bezier(0.25, 0.5, 0.5, 1);
          animation: ink-visual-show 0.25s cubic-bezier(0.25, 0.5, 0.5, 1);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 1;
  z-index: -1;
}
button .ink-visual-container .ink-visual.hide {
 ...

JavaScript

$("html").addClass("ink-btn");

  var sqrt2 = Math.sqrt(2);

  function hypot(x, y) { return Math.sqrt((x * x) + (y * y)); }

  $("button").each(function(el) {
    var self = $(this),
        html = self.html();

    self.html("").append($('<div class="btn"/>').html(html));
  })
  .append($('<div class="ink-visual-container"/>').append($('<div class="ink-visual-static"/>')))
  
  .on("select", function(evt) { event.preventDefault(); return false; })
  .on("mousedown touchstart", function(evt) {
    event.preventDefault();
    
    var self = $(this),
        container = self.find(".ink-visual-static", true).eq(0);

    if(!container.length) return;

    container.find(".ink-visual").addClass("hide");
    
    var rect = this.getBoundingClientRect(),
        cRect = container[0].getBoundingClientRect(),
        cx, cy, radius, diam;

        if (event.changedTouches) {
          cx = event.changedTouches[0].clientX;
          cy = event.changedTouches[0].clientY;
        }
        else {
          cx = event.clientX;
          cy = event.clientY;
        }

    if(self.is(".float")) {
      var rx = rect.width / 2,
          ry = rect.height / 2,
          br = (rx + ry) / 2,
          mx = rect.left + rx,
          my = rect.top + ry;

      radius = hypot(cx - mx, cy - my) + br;
    }
    else {
      var w = Math.max(cx - rect.left, rect.right - cx),
          h = Math.max(cy - rect.top, rect.bottom - cy);
      
      radius = hypot(w, h);
    }
    diam = radius * 2;
        
    var el = $('<div class="ink-visual"/>').width(diam).height(diam)
    .css("left", cx - cRect.left - radius).css("top", cy - cRect.top - radius)
    
    .on("animationend webkitAnimationEnd oanimationend MSAnimationEnd", function() {
      var self2 = $(this);

      switch(event.animationName) {
        case "ink-visual-show":
          if (self.is(":active")) self2.addClass("shown");
          break;

        case "ink-visual-hide":
          self2.remove();
          break;
     ...