JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<a class="inkMe" ink-color="#1a1a71">Здесь название</a>

CSS

.inkMe {
box-sizing:border-box;
overflow:hidden;
position:relative !important;}

.inkMe {
text-decoration:none;
font-size:20px;
display:inline-block;
border:1px solid #666;
border-radius:3px;
padding:10px;
color:#000;
cursor:pointer;
position:relative;
overflow:hidden;
text-align:center;
user-select:none;
-webkit-user-select:none;
-moz-user-select:none;}

.inkMe:hover {
opacity:0.7;
color:#000;}

.ink {
position:absolute;
display:block;
border-radius:100%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);}

.inkDefaultColor {background-color:rgba(68,204,170,0.45);}

.ink.animate{
-webkit-animation:boom 800ms ease-out;
animation:boom 800ms ease-out;}

@-webkit-keyframes boom {
 0% {
transform: scale(0);
-webkit-transform: scale(0);
-moz-transform: scale(0);}

 100% {
transform: scale(2.5);
-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
opacity: 0;}
}

@keyframes boom{
 0% {
transform: scale(0);
-webkit-transform: scale(0);
-moz-transform: scale(0);}

 100% {
transform: scale(2.5);
-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
opacity: 0;}
}

JavaScript

$('.inkMe').click(function(evt){
	var elem = $(this);
	var multiple = false;
	(this.getAttribute("multiple-ink")== 'true')?multiple = true:true;
	if(!multiple)
		{
		if(elem.find(".ink").length == 0)
		elem.prepend("<span class='ink'></span>");
		}
	else
	elem.prepend("<span class='ink'></span>");
	var display = elem.css("display");
	(display=='inline'||display=='inline-block')?elem.css({display:'inline-block'}):elem.css({display:'block'});
	var inkColor = this.getAttribute("ink-color");
	var ink = elem.find('.ink');		
	inkColor!=""?ink.css({'background-color':inkColor}):true;
	(!multiple)?ink.removeClass('animate'):true;
	if(!ink.width()&&!ink.height())
		{
		var max = Math.max(elem.outerWidth(),elem.outerHeight());
		ink.css({width:max+'px',height:max+'px'});
		}
	var x = evt.pageX - elem.offset().left - ink.width()/2;
	var y = evt.pageY - elem.offset().top - ink.height()/2;
	ink.css({top:y+'px',left:x+'px'});
	setTimeout( function(){ink.addClass('animate');},1);
});