آموزش CSS ripple effect buttons

آموزش CSS ripple effect buttons
آموزش CSS ripple effect buttons
Rate this post

آموزش CSS ripple effect 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.

آموزش CSS ripple effect buttons

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.

آموزش CSS ripple effect buttons

دموی آموزش CSS ripple effect

دانلود سورس آموزش CSS ripple effect

 

 

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;}
}

 

آموزش CSS ripple effect buttons

Share