If you have used lollipop version of android you see a nice ripple effect on button clicks. This tutorial is about achieving a similar result, the CSS ripple effect using only CSS.

CSS Ripple effect does not involve any javascript or jquery library. The effect is achieved using CSS3 animation.

The basic idea behind CSS ripple effect

The button is basically an anchor tag, by having proper padding and background color the button looks pretty good as in the image above.

Inside anchor tag(button) we placed another element <span> by setting its opacity to 0.3 and scaled it to 0.

Finally, For button hover event the animation is applied to opacity and scale property of the <span> element to achieve CSS ripple effect. Go through below code for more details.

DemoDownload

HTML

<a href="#" class="ripple-button1"><div class="wave1"></div>Ripple1</a>
&nbsp;&nbsp;
<a href="#" class="ripple-button2"><div class="wave2"></div>Ripple2</a>

CSS

* {
	padding:0;
	margin:0;
}

body {
	font-family:Verdana, Geneva, sans-serif;
	font-size:18px;
	background-color:#FFF;
	padding:50px;
	background-color:#EEE;
}

.ripple-button1, .ripple-button2{
	position:relative;
	width:150px;
	height:75px;
	background-color:#99C;
	color:#FFF;
	border-radius:3px;
	text-decoration:none;
	text-align:center;
	vertical-align:middle;
	display:table-cell;
}

.wave1{
	position:absolute;
	width:75px;
	height:75px;
	background-color:#FFF;
	top:0;
	left:35px;
	transform: scale(0);
	opacity:0.5;
	border-radius:300px;
}

.wave2{
	position:absolute;
	width:150px;
	height:75px;
	background-color:#FFF;
	top:0;
	left:0;
	transform: scale(0);
	opacity:0.5;
}

.ripple-button1:hover > .wave1{
	animation: ripple-in1 2s;
}

.ripple-button2:hover > .wave2{
	animation: ripple-in2 2s;
}

 
@keyframes ripple-in1 {
 0% {transform: scale(0);}
 20%{transform: scale(1);opacity:0.3;}
 100%{transform: scale(1);opacity:0;}
}

@keyframes ripple-in2 {
 0% {transform: scaleX(0);}
 20%{transform: scaleX(1);opacity:0.3;}
 100%{transform: scaleX(1);opacity:0;}
}