/* Ripple effect */ .ripple { background-position: center; transition: background 0.2s; } .ripple:hover { background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%; } .ripple:active { background-color: #000; 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> */
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter