<html> <head> <style> /* Material style */ button { border : none ; cursor : pointer ; color : white ; padding : 10px 30px ; border - radius : 2px ; font - size : 22px ; box - shadow : 2px 2px 4px rgba ( 0 , 0 , 0 , . 4 ); } . button1 { background : #ff4040; } . button2 { background : #ffa96b; } . button3 { background : #2196F3; } . button4 { background : #5cd38c; } /* Ripple magic */ button { position : relative ; overflow : hidden ; margin : 10px ; } button : after { content : '' ; position : absolute ; top : 50 %; left : 50 %; width : 5px ; height : 5px ; background : rgba ( 255 , 255 , 255 , . 5 ); opacity : 0 ; border - radius : 100 %; transform : scale ( 1 , 1 ) translate (- 50 %); transform - origin : 50 % 50 %; } @keyframes ripple { 0 % { transform : scale ( 0 , 0 ); opacity : 1 ; } 20 % { transform : scale ( 25 , 25 ); opacity : 1 ; } 100 % { opacity : 0 ; transform : scale ( 40 , 40 ); } } button : focus : not (: active ):: after { animation : ripple 1s ease - out ; } </style> </head> <body> <button class = "button1" > Click Me... </button> <button class = "button2" > Click Me... </button> <button class = "button3" > Click Me... </button> <button class = "button4" > Click Me... </button> </body> </html>

If you have used lollipop version of android you see a nice. This tutorial is about achieving similar result, the CSS ripple effect on button clicks.does not involves any javascript or jquery library. The effect is achieved using CSS3 animation. Keyframe property of css provides very smooth animation effect.Lets see the completeThis all about theIn case of any queries please do comments in comment box below.