1

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.

Zedd
  • 224
  • 1
  • 14
  • 1
    The reason it uses javascript is because it needs to know where your cursor is on the button to expand the animation from there. If you are find with it rippling from the center every time no matter where you click then it is definitely possible. The 2nd link in your list there does it – abney317 Jul 06 '20 at 13:18
  • You could maybe trick a little bit by defining several divs inside your button and you change the origin position so you get the ripple effect starting from the center of that div. But that would be kinda bad. – Yoann Picquenot Jul 06 '20 at 13:22
  • [Here](https://codepen.io/Momciloo/pen/GoGRrQ) an experimental of pure css track, as you can see is possible but not perfect. i suggest you to use js. – Simone Rossaini Jul 06 '20 at 13:27
  • Thanks guys. I think you're right @SimoneRossaini, I think this really requires the use of JS. But I still hope that someone knows how to achieve this using pure CSS. If noone can do it, then I think I'll use JS then. – Zedd Jul 06 '20 at 13:36
  • Yes and it's nothing wrong :) – Simone Rossaini Jul 06 '20 at 13:37
  • As others have stated, you can't do this with pure CSS unless you take the experimental route @SimoneRossaini (which is pretty cool) did. CSS can't determine where the cursor is. – disinfor Jul 06 '20 at 13:43

0 Answers0