JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<a id="button" style="display: block; position: relative; background: steelblue; color: white;">Hello</a>

CSS

.ripple-circle {
    display: block;
    position: absolute;
    background: rgba(0, 0, 0, .175);
    border-radius: 50%;
    transform: scale(0);
}
.ripple-circle.animation {
    animation: ripple 0.5s linear;
}
@keyframes ripple {
    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}

JavaScript

$.fn.rippleButton = function () {
    var $this = $(this);
    $this.on("click", function (event) {
        $this.css("overflow", "hidden");
        
        if ($this.find(".ripple-circle").length == 0) {
            $this.prepend($("<span>").addClass("ripple-circle"));
        }
        var $circle = $this.find(".ripple-circle");
        $circle.removeClass("animation");
        var radius = Math.max($this.outerWidth(), $this.outerHeight());
        $circle.css({
            height: radius,
            width: radius
        });
        var x = event.pageX - $this.offset().left - $circle.width() / 2;
        var y = event.pageY - $this.offset().top - $circle.height() / 2;
        $circle.css({
            top: y + 'px',
            left: x + 'px'
        }).addClass("animation");
    });
}

$("#button").rippleButton();