JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<a class="ripple-button" style="display: block; background: steelblue; color: white; padding: 20px;">Hello</a>

<a class="ripple-button" style="display: block; background: steelblue; color: white; padding: 20px;">Hello</a>

<a class="ripple-button" style="display: block; background: steelblue; color: white; padding: 20px;">Hello</a>

<a class="ripple-button" style="display: block; background: steelblue; color: white; padding: 20px;">Hello</a>

<a class="ripple-button" style="display: block; background: steelblue; color: white; padding: 20px;">Hello</a>

<a class="ripple-button" style="display: block; background: steelblue; color: white; padding: 20px;">Hello</a>

<a class="ripple-button" style="display: block; background: steelblue; color: white; padding: 20px;">Hello</a>

<a class="ripple-button" style="display: block; background: steelblue; color: white; padding: 20px;">Hello</a>

<a class="ripple-button" style="display: block; background: steelblue; color: white; padding: 20px;">Hello</a>

<a class="ripple-button" style="display: block; background: steelblue; color: white; padding: 20px;">Hello</a>

<button class="ripple-button">Hello</button>

CSS

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

JavaScript

$.fn.rippleButton = function () {
    this.on("click", function (event) {
        var $this = $(this);
        $this.css("overflow", "hidden");
        $this.css("position", "relative");
        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 - radius / 2;
        var y = event.pageY - $this.offset().top - radius / 2;
        $circle.css({
            left: x + 'px',
            top: y + 'px'
        }).addClass("animation");
    });
}

$(".ripple-button, input.gform_button").rippleButton();