<section>
<button><span>button</span></button>
</section>
section{
width: 30%;
margin: 15% auto;
background: #f2f2f2;
padding: 5%;
}
button{
border: 3px solid #222;
background: transparent;
overflow: hidden;
width: 100%;
outline: none;
span{
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-weight: 700;
font-size: 1.5em;
color: #222;
display: block;
user-select: none;
position: relative;
overflow: hidden;
padding: 20px;
&:hover{cursor: pointer;}
}
}
.circle{
display: block;
position: absolute;
background: rgba(0,0,0,.075);
border-radius: 50%;
transform: scale(0);
&.animate{animation: effect 0.65s linear;}
}
@keyframes effect{
100%{
opacity: 0;
transform: scale(2.5);
}
}
var element, circle, d, x, y;
$("button span").click(function(e){
element = $(this);
if(element.find(".circle").length == 0)
element.prepend("<span class='circle'></span>");
circle = element.find(".circle");
circle.removeClass("animate");
if(!circle.height() && !circle.width())
{
d = Math.max(element.outerWidth(), element.outerHeight());
circle.css({height: d, width: d});
}
x = e.pageX - element.offset().left - circle.width()/2;
y = e.pageY - element.offset().top - circle.height()/2;
circle.css({top: y+'px', left: x+'px'}).addClass("animate");
})
Website
