JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<a target="_blank" href="http://google.com" class="ripple box" data-ripple-color="white">Google</a>

CSS

.box {
    width: 300px;
    height: 200px;
    margin: 20px;
    float: left;
    color: #fff;
    background: green;
}
.ripple {
    position: relative;
    overflow: hidden;
}
.ripple-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #555;
    opacity: 0.1;
    animation: ripple-overlay-animation 1s;
    animation-fill-mode: both;
}
@keyframes ripple-overlay-animation {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        opacity: 0;
    }
}
.ripple-effect {
    position: absolute;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    background: #555;
    transform: scale(0);
    opacity: 0.3;
    animation: ripple-animation 1s;
    animation-fill-mode: both;
}
@keyframes ripple-animation {
    from {
        transform: scale(0);
        opacity: 0.3;
    }
    to {
        transform: scale(4);
        opacity: 0;
    }
}

JavaScript

var rippleEffect = function (event) {
    var $div = $('<div/>');
    var $overlay = $('<div/>');
    var btnOffset = $(this).offset();
    var xPos = event.pageX - btnOffset.left;
    var yPos = event.pageY - btnOffset.top;

    $div.addClass('ripple-effect');

    cHeight = $(this).height();
    cWidth = $(this).width();

    var size = cHeight > cWidth ? cHeight : cWidth;

    $div.css({
        height: size,
        width: size,
            "animation-duration": ((size - 100) * 1.2 + 800) + "ms",
        top: yPos - (size / 2),
        left: xPos - (size / 2),
        background: $(this).data("ripple-color")
    }).appendTo($(this));

    $overlay.addClass('ripple-overlay')
        .css({
        background: $(this).data("ripple-color")
    })
        .appendTo($(this));

    window.setTimeout(function () {
        $div.remove();
        $overlay.remove();
    }, 1000);
    if(event.type == "mousedown"){
        console.log("Try to force click for FF");
        this.click();
    } else {
        console.log("Event: " + vent.type);
    }
};

$('.ripple').on('mousedown', rippleEffect);