Material Download Demo

by dibalik seo

HTML

<div id='wrap'>
  <a class='tombolripple tsatu ripple-effect' href='#0'>Demo</a>
  <a class='tombolripple tdua ripple-effect' href='#0'>Download</a>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');

body {
  background: #ecf0f1;
  font-family: 'Fira Sans Condensed', sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 30vh auto 0 auto;
}

/* Arlina Design Material Button */
#wrap {
  margin: 20px auto;
  text-align: center
}

#wrap a {
  text-decoration: none
}

.tombolripple {
  cursor: pointer !important;
  overflow: hidden;
  text-decoration: none;
  display: inline-block;
  -webkit-appearance: none;
  font-size: 1.7em;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  padding: 20px 25px;
  margin: 0 15px;
  box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.tombolripple:hover,
.tombolripple:active {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.tombolripple.tsatu {
  background: #e67e22;
}

.tombolripple.tdua {
  background: #3498db;
}

.tombolripple.tsatu:hover,
.tombolripple.tsatu:active {
  background: #f49541;
}

.tombolripple.tdua:hover,
.tombolripple.tdua:active {
  background: #4aaff3;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

circle {
  fill: rgba(255, 255, 255, 0.07);
}

.ripple-effect {
  position: relative;
  overflow: hidden;
  -webkit-transform: translatez(0);
}

.teffect {
  display: block;
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  transform: scale(0);
  background: #fff;
  opacity: 0.5;
}

.teffect.animate {
  animation: ripple-effect 0.5s linear;
}

@keyframes ripple-effect {
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}

@-webkit-keyframes ripple-effect {
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}

JavaScript

/* Dibalik Seo Material Button by http://www.dibalikseo.com */
(function($) {
    $(".ripple-effect").click(function(e){
        var rippler = $(this);
        if(rippler.find(".teffect").length === 0) {
            rippler.append("<span class='teffect'></span>");
        }
        var teffect = rippler.find(".teffect");
        teffect.removeClass("animate");
        if(!teffect.height() && !teffect.width())
        {
            var d = Math.max(rippler.outerWidth(), rippler.outerHeight());
            teffect.css({height: d, width: d});
        }
        var x = e.pageX - rippler.offset().left - teffect.width()/2;
        var y = e.pageY - rippler.offset().top - teffect.height()/2;
        teffect.css({
            top: y+'px',
            left:x+'px'
        }).addClass("animate");
    })
})(jQuery);