JSFiddle - React, Tailwind, and code Playground

by ajai jothi

HTML

<a href="#" class="mbtn">Material Button</a>
<a href="#" class="mbtn light">Material Button</a>

CSS

.mbtn {
    background: rgb(230, 85, 68);
    text-decoration:none;
    padding:10px 20px;
    overflow:hidden;
    display:inline-block;
    color: #333;
    text-shadow:1px solid #333;
    font-family: arial;
    font-size: 12px;
    border:1px solid rgb(220, 85, 68);
    position:relative;
}
.mbtn .ripple {
    border-radius:100%;
    opacity:1;
    background: rgba(0, 0, 0, 0.1);
    width:0;
    height:0;
    padding:0;
    margin: 0;
    transition: all ease-out 2s;
    position: absolute;
    top:0;
    left: 0;
}
.mbtn.light .ripple{
    background: rgba(255, 255, 255, 0.1);
}

JavaScript

$(document).on('mousedown', '.mbtn', function (e) {
    e.preventDefault();
    var btn = $(this);
    var ripple = $('<span class="ripple"/>');
    var offsetX = e.clientX - btn.offset().left;
    var offsetY = e.clientY - btn.offset().top;
    console.log(e, offsetX, offsetY);
    ripple.css({
        top: offsetY + 'px',
        left: offsetX + 'px'
    });
    btn.append(ripple);
    setTimeout(function(){
        ripple.css({
            top: offsetY-150,
            left: offsetY-150,
            width: '300px',
            height:'300px'
        });        
    },0);
    btn.one('mouseup', function(){
        ripple.css({opacity:0});
        setTimeout(function(){ripple.remove();},500);
    });
});