Penulis 
Cara Membuat Tombol Demo Dan Download Dengan Efek Ripple - Pada kesempatan kali ini saya akan membagikan sebuah tutorial - Cara Membuat Tombol Demo Dan Download Dengan Animasi Efek Ripple.
Tentunya hal ini akan semakin membuat website atau blog anda terlihat lebih menarik dengan penambahan sebuah efek ripple pada sebuah tombol demo dan download yang akan membuat dan mempercantik tampilan tombol demo dan download dengan penambahan material design.
Membuat Tombol Demo Dan Download Dengan Efek Animasi Ripple
1. Pertama Buka Blogger => Klik tombol Edit HTML => Template Editor dan Tambahkan CSS di bawah ini sebelum kode ]]></b:skin> atau </style>
/* INSPIRATIF-ku 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:0 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)}}" Untuk warna pada tombol dan fungsi lainnya bisa sobat sesuaikan kembali "
2. Kemudian tambahkan kode jQuery ini sebelum kode </body>
<script type='text/javascript'>
//<![CDATA[
!function(a){a(".ripple-effect").click(function(b){var c=a(this);0===c.find(".teffect").length&&c.append("<span class='teffect'></span>");var d=c.find(".teffect");if(d.removeClass("animate"),!d.height()&&!d.width()){var e=Math.max(c.outerWidth(),c.outerHeight());d.css({height:e,width:e})}var f=b.pageX-c.offset().left-d.width()/2,g=b.pageY-c.offset().top-d.height()/2;d.css({top:g+"px",left:f+"px"}).addClass("animate")})}(jQuery);
//]]>
</script>" Fungsi dari Kode jQuery untuk memunculkan efek Ripple pada tombol "
Kemudian simpan template
Sekarang untuk kode pemanggilnya, Tambahkan kode HTML di bawah ini di dalam postingan MODE HTML, bukan Compose.
<div id="wrap">
<a class="tombolripple tsatu ripple-effect" href="#" rel="nofollow" target="_blank">Demo</a>
<a class="tombolripple tdua ripple-effect" href="#" rel="nofollow" target="_blank">Download</a>
</div>Tambahkan Link tujuan anda pada kode yang sudah di tandai (#)
Selesai Dan lihat hasilnya