Pure CSS for ripple effect coming from the point of click

user_13086484 0
Viewed 1930

I just want to have this kind of ripple effect for my button and notice the behavior of the ripple effect for the button on click:

enter image description here

This is from: https://codepen.io/kris-ellery/pen/Dnktj

This is so cool because the ripple's epicenter comes from the point of the click. But unfortunately, I don't want to have the JavaScript code, I just want pure CSS. Is this possible?

This is all I've got:

    button {
        /* border: 5px solid white; */
        height: 50vh;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        font-size: 4rem;
        padding: 0 1rem;
        position: absolute;
        z-index: 1;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        /* flex-flow: column wrap; */
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    button:hover {
        transition: 0.5s;
        cursor: pointer;
        /* transform: translate3d(0, 0, 0); */
    }
    button:after {
        position: absolute;
        content: "";
        width: 10%;
        height: 100%;
        pointer-events: none;
        background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
        transform: scale(10, 10);
        opacity: 0;
        transition: transform 0.3s, opacity 1s;
    }
    button:active:after {
        transform: scale(0, 0);
        opacity: 0.3;
        transition: 0s;
    }
<button>◄</button>

Seriously, I've researched and searched for a pure CSS. I even tried them (as you can see with the code above) but it was not the kind of ripple behaviour that I wanted. I want the ripple behaviour above. I found some code where it meets these conditions but they have JS with them and I don't want that, please. Here are some websites I've visited for this ripple effect. Maybe taking a look at some of these can help, hopefully:

Please help guys.

css-animations css
0 Answers
Related