jQuery ripple click / tap effect inspired by material design: 4 demos

Create ripple effect by using jQuery on click and tap

In this tutorial, I will show you demos of creating the material design inspired ripple effect by using a jQuery plug-in.  The plug-in name is rippleria that you may download from the Github website here.

By using this plug-in, you may create the ripple effect in different elements like buttons, images etc. Keep reading the section below for live demos, code and how to set up this plug-in to be used on your website.

A demo of creating ripple effect in buttons

For creating the ripple effect in buttons, you may simply use the data attribute data-rippleria in a button tag and it will create the ripple effect with default values.

You may also use other data attributes like data-rippleria-color for ripple color, data-rippleria-duration, and data-rippleria-easing with custom values. Have a look at both types in the demo:

jquery ripple effect

See online demo and code

The markup:

 

You just need to include the dependency files as shown in the code section of the demo page.

Create ripple effect in buttons by JavaScript

In above demo, the ripple effect is created by using the data attributes. You may also use the jQuery code for specifying the options of ripple effect including color, duration, easing effect etc. Have a look at the output:

jquery ripple button

See online demo and code

The script:

 

The markup:

 

A demo of creating ripple effect in image

You may also create the ripple effect in images by using this plug-in. Click on the image after opening the demo page to see it. Click again and again to see various colors:

jquery ripple image

See online demo and code

The code for image:

 

The script:

 

An example with table

You may also create a ripple effect in an HTML table by using this plug-in. For the demo, I have created an HTML table with Bootstrap based classes.

Click on any row for displaying the riffle effect that spreads across the table.

See online demo and code

This is just a rough presentation. You may refine it and use beautifully. The purpose is to show how this ripple effect can be used in any element. Try it in links, form fields etc.