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 animate.

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

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.

<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;
  }
}

Material Design Ripple Click Effect, Pure CSS ripple effect Plugin/Github, ripple animation css, css ripple effect on hover, ripple effect css animation infinite, button ripple effect css codepen, circle ripple effect css