CSS/Android Ripple Effect in Pure CSS

/* Ripple effect */ .ripple { background-position: center; transition: background 0.8s; } .ripple:hover { background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%; } .ripple:active { background-color: #6eb9f7; background-size: 100%; transition: background 0s; } /* Button style */ button { border: none; border-radius: 2px; padding: 12px 18px; font-size: 16px; text-transform: uppercase; cursor: pointer; color: white; background-color: #2196f3; box-shadow: 0 0 4px #999; outline: none; } /* <button class="ripple">Test button</button> */
Ripple effect on click element

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.