Pure CSS Ripple Effect Animation for Android Material Design

The pure CSS ripple effect is CSS only executes “ripple” animation for Android material design at the click event.

The main advantage of this solution is that there is no manipulation of the DOM in order to create the animation. This means that’s faster – it doesn’t use JavaScript or jQuery for animation.

This solution is also implemented in one of Bootstrap’s largest libraries of Bootswatch in their Material theme.

Must Read – JavaScript Library to Realistic Water Ripple Effect Using WebGL

How to make use of it:

Link to the required stylesheet:

<link href="ripple.css" rel="stylesheet">

Add the CSS class ‘ripple’ to the HTML aspect and complete it.

<button type="button" class="ripple" >Primary</button>

Override the default types within the LESS:

.ripple {
  position: relative;
  overflow: hidden;

  &:after {
    content: "";
    background: rgba(255,255,255,0.3);
    display: block;
    position: absolute;
    border-radius: 50%;
    padding-top: 240%;
    padding-left: 240%;
    margin-top: -120%;
    margin-left: -120%;
    opacity: 0;
    transition: all 1s;
  }

  &:active:after {
    padding-top: 0;
    padding-left: 0;
    margin-top: 0;
    margin-left: 0;
    opacity: 1;
    transition: 0s;
  }

}

Read More – 

Create Customizable Ripple Click Effects For the jQuery plugin
Click Effect Inspired By Google’s Material Design | Wave.js


example-css-ripple-effect


See Demo And Download

Official Website(mladenplavsic): Click Here

This superior jQuery/javascript plugin is developed by mladenplavsic. For extra Advanced Usages, please go to the official website.

Share