Getting perfect Ripple effect using CSS


Material design brought us various good things and ripple effects in buttons is one of them. Now, I am not an article writer. I am a person who can write code, so let’s start it.

Step 1.

Copy this code and paste it into seperate css file.

.ripple {
 position: relative;
 overflow: hidden;
 transform: translate3d(0, 0, 0);
.ripple:after {
 content: "";
 display: block;
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 pointer-events: none;
 background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
 background-repeat: no-repeat;
 background-position: 50%;
 transform: scale(10, 10);
 opacity: 0;
 transition: transform .5s, opacity 1s;
.ripple:active:after {
 transform: scale(0, 0);
 opacity: .3;
 transition: 0s;

Now, you can add this css file in your html files and can add class ripple to your buttons and it will work like a magic. And yes, it works with bootstrap too.

For more watch this video:

About the author

By hiteshchoudharylco

Most common tags

%d bloggers like this: