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:
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:
- https://mladenplavsic.github.io/css-ripple-effect/
- https://codepen.io/finnhvman/pen/jLXKJw?editors=1100
- https://freefrontend.com/css-ripple-effects/
- https://codepen.io/ainalem/pen/LqvBWO
- How to create Ripple effect on Click - Material Design
- Add ripple effect to my button with button background color?
- https://codeburst.io/create-a-material-design-ripple-effect-without-js-9d3cbee25b3e
- https://www.w3schools.com/howto/howto_css_animate_buttons.asp
- https://medium.com/@jh3y/how-to-create-the-ripple-effect-from-google-material-design-c6f993e1d39
- CSS ripple effect on Hover?
- Getting right position of clicked button (ripple effect)
- Ripple effect pure css transparent
Please help guys.