Creating ripple effect on click only using css

Creating ripple effect on click only using css

3 min. read

HTML markup

<div id="tb">
	<div id="td">Click me to see ripple effect</div>
</div>

CSS rules

Styling div#tb container div

#tb
{
	display: table;
	position: relative;
	font-size:14px;
	font-family:Helvetica,arial,sans-serif;
	width: 190px;
	height: 190px;
	margin: 0 auto;
	color: #0c5d73;
	text-align: center;
	cursor: pointer;
}

Above css rules makes div#tb element a square box of dimensions 190px * 190px and it is given relative position to keep absolute positioned ripple layer (which we will create in next few steps) inside it.

Styling div#td element

#td
{
	display:table-cell;
	vertical-align:middle;
	font-weight:bold;
	position:relative;
	z-index:2;
}

Above css for div#td aligns its text at middle position horizontally and vertically inside it.

See result in the fiddle below

Creating the ripple layer (#tb:after pseudo element)

#tb:after
{
	content: '';
	position: absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background-color: #F44336; /* Reddish background */
	border-radius: 50%;
	z-index: 1;
}

The ripple layer is absolute positioned with respect to div#tb ( div#tb's position is relative ), and it will be at a lower layer below the div#td element because it's z-index is 1 and div#td's z-index is 2, this is needed to keep the text "Click me to see ripple effect" above the ripple layer and to prevent it from disappering when ripple layer displayes.

See result in the fiddle below

Making the ripple layer invisible and adding transitions to it

#tb:after
{
	opacity: 0; /* This css rule makes #tb:after(ripple layer) invisible */
	transform: scale(1,1);
	transition: transform 1s, opacity 1s;
}

Now ripple layer is created, it is in it's place but just invisible because of 0 opacity.

See result in the fiddle below

Main part of css that triggers the ripple effect

#tb:active:after
{
	opacity: 0.7;
	transform: scale(0,0);
	transition:0s;
}

When div#tb is clicked it comes in active state and above css applies partial opacity of value 0.7 to ripple layer and transforms it to a size of 0px * 0px ( transform : scale(0,0) ) instantly because of transition : 0s.

See final result in the fiddle below

Explanation

  1. The ripple layer is invisible and there is transition effect for transform and opacity properties that ensures that any change in transform and opacity of ripple layer will take place in complete 1 second not instantly.
  2. When div#tb get clicked it comes to active state, then ripple layer is given some opacity and transformed to 0px * 0px instantly ( instantly because of transition : 0s in #tb:active:after css block ), it is still invisible because of 0px dimensions and will remain invisible till the time click is not released.
  3. When click is released
    1. Active state of div#tb ends.
    2. Effect of #tb:active:after css ends, and effect of #tb:after css comes to play.
    3. opacity : 0.7 and transform : scale(0,0) given to ripple layer by active state will change to 0 and transform: scale(1,1) respectively in 1 second, not instantly i.e ripple layer will grow to it's original dimensions and will also fade in 1 second duration.
    4. After 1 second from release of click the ripple layer will be invisible ( due to opacity : 0 ) and will have it's full dimensions 190px * 190px ( due to transform : scale(1,1) ).
  4. Ripple effect finished.
Write comments