How to add Ripple effect to a button/links in Websites

How to add Ripple effect to a button/links in Websites

How to add Ripple effect to a button/links in Websites ? its good to see the effects while pressing buttons/links on website. It greatly improves the user experience on the website and give you an extra advantage. So, ripple effects are widely using on android phones, specially from Android Lollipop Version 5.0. So, following this many people have started adding this effects on their website, to improve or provide a smooth experience while  visiting their website.

In this tutorial, i am going to explain how to add ripple effect on your website.For this download this package for adding necessary js and css files.

Add Ripple effect to a button/links in Websites

Add the CSS

Add the JS

Sample HTML

Add the class like this for Ripple effect:

Specify the Ripple color using the class like this:

Download files from here : Ripple effect

I hope you understand this article, How to add Ripple effect to a button/links in Websites. Please drop your comments below. Thanks for reading.

2 Comments

  1. Preprogrammer (Post author)

    Great article…Thank you.

    Reply
  2. Aiswarya M

    Good article. Very useful and easy one.

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *