STYLE SWITCHER

Google material design button effect

background-image

<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

Recent Article

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.