Pure css ripple effects for buttons

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

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

Basic idea behind CSS ripple effect

The button is basically a anchor tag, by having proper padding and background color the button looks pretty good as in 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 on opacity and scale property of <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;}
}