HOW TO MAKE LINK WITH RIPPLE EFFECT

RIPPLE EFFECT LINK FOR SITE

How to make nice effect animation on link for site.

CSS RIPPLE EFFECT

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//cdn.staticaly.com/gh/joniibra/webdev/blogger/widgets/en_US/ripple.link/ripplelink.css");
//]]>
</script>

JAVASCRIPT CODE

<script type="text/javascript" src="//cdn.staticaly.com/gh/joniibra/webdev/blogger/widgets/en_US/ripple.link/ripplelink.js"></script>

JAVASCRIPT INLINE CODE

<script type='text/javascript'>
//<![CDATA[
// Ripple
$(function(){var t,i,s,e;$(".ripplelink").click(function(h){0===$(this).find(".ink").length&&$(this).prepend("<span class='ink'></span>"),t=$(this).find(".ink"),t.removeClass("animate"),t.height()||t.width()||(i=Math.max($(this).outerWidth(),$(this).outerHeight()),t.css({height:i,width:i})),s=h.pageX-$(this).offset().left-t.width()/2,e=h.pageY-$(this).offset().top-t.height()/2,t.css({top:e+"px",left:s+"px"}).addClass("animate")})});
!function(t){var a=t("a.newer-link"),n=t("a.older-link");t.get(a.attr("href"),function(n){a.html('<span class="post-nav">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></span> <span>'+t(n).find(".post .post-title").text()+"</span>")},"html"),t.get(n.attr("href"),function(a){n.html('<span class="post-nav"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</span><span> <span>'+t(a).find(".post .post-title").text()+"</span>")},"html")}(jQuery);
</script>

USAGE LINK WITH RIPPLE EFFECT

<a class="ripplelink" href="#" target="_blank" title=""><i class="fa fa-coffee"></i></a>

<a class="ripplelink" href="#" rel="nofollow noopener" target="_blank" title=""><i class="fa fa-android"></i></a>

You'll need Font Awesome to use this Ripple's code.