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

<!-- Ripple effect CSS -->
<link href="{{asset("packages/macom/admindashboard/js/ripple_effect/ripple.min.css")}}" rel="stylesheet">

Add the JS

<!--  Ripple effect JS -->
<script src="{{asset("packages/macom/admindashboard/js/ripple_effect/ripple.min.js")}}"></script>

Sample HTML

<li>
    <a class="material-ripple" data-ripple-color="#31B0D5"  href="#"> Menu 1 </a>
    <ul class="nav nav-second-level">
        <li>
            <a class="material-ripple" data-ripple-color="#31B0D5" href="#"> Sub menu 1 </a>
        </li>
        <li>
            <a class="material-ripple" data-ripple-color="#31B0D5" href="#"> Sub menu 2 </a>
        </li>
        <li>
        <a class="material-ripple" data-ripple-color="#31B0D5" href="#"> Sub menu 3 </a>
        </li>
    </ul>
</li>

Add the class like this for Ripple effect:

class="material-ripple"

Specify the Ripple color using the class like this:

data-ripple-color="#31B0D5"

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.

Add Ripple effect to a button/links in Websites

Related