Pure CSS3 android Style button click Wave Effect

Brief tutorials

Css-ripple-effect is a cool flat style button that uses pure CSS3 to click the baud effect. The effect is modeled after the material design-style Click wave of the Android system.

How to use

Introduce the Ripple.css file in the page.

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

HTML structure

To create a click-through effect for a <button> element, simply add the Ripple class class to it.

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

CSS Styles

You can modify the style of the hit wave effect by 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;}  }

The above is pure CSS3 android Style button Click Wave Effect content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

