Pure CSS3 Android style button click wave effect

Brief Tutorial

css-ripple-effect is a cool flat style button click ripple effect made using pure CSS3. This effect is modeled after the Material design style click wave of the Android system.

Usage method

Introduce the ripple.css file into the page.

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

HTML structure

To create a click wave effect for a element, you only need to add the ripple class to it.

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

Copy after login

CSS Style

You can modify the style of the clickwave effect through the ripple.css file or ripple.less file.

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

Copy after login

The above is the content of the pure CSS3 Android style button click wave effect. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!