The What

It is a simple jQuery and CSS3 code you can put on your WordPress theme or front end component to quickly implement ripple effect on various element.

How To Use

Simply load simple-ripple-effect.js and simple-ripple-effect.css then ripple effect will be applied to all element which has .ripple-effect class.

Here's how it looks. Try clicking it:

Here's the code:

<div class="box ripple-effect"></div>


There are few things that can be customized:

1. Flexible limit

By default, the dimension of the ripple effect mimics the dimension of the clicked area. However, there's a case where you'll want it to mimic the parent of the clicked element's dimension instead of the clicked element's dimension.

For example:

Here's the code:

<div class="box-wrapper">
	<div class="box ripple-effect" data-ripple-limit=".box-wrapper"></div>

2. Flexible Color

By default, the color of the ripple effect is rgba( 0, 0, 0, 0.3). You can change it using custom data attribute data-ripple-color="":

Here's the code:

<div class="box ripple-effect" data-ripple-color="#009688"></div>

3. Flexible Radius

You can implement border-radius by using data-ripple-wrap-radius="":

Here's the code:

<div class="box ripple-effect" data-ripple-color="#009688" data-ripple-wrap-radius="50%"></div>

4. Custom classes

If you need more customization, you can add custom classes to the ripple effect's wrapper to further modify your ripple effect's shape using CSS. Simply add data-ripple-wrap-class="" to the clicked element:


Download & Fork Simple Ripple Effect on GitHub.

This is my step by step tutorial about this Simple Ripple Effect.