laptop-phone webbbr

Ripple Effect SVG Icon Buttons

September 22, 2015

In this article the goal is to create Google ripple effect SVG icon buttons for social media, app and ecommerce. (For an in-depth analysis of Google Material Design and Responsive Interaction please see this post.)

Credits

The icon buttons were largely inspired by this article on Codrops written by Dennis Gaebel although there are a few notable changes. When experimenting with multiple instances of the buttons it was becoming a little awkward, and with the addition of SVG for the actual icons the decision was made to ditch TweenMax /SVG for the ripple effect in favour of a simple CSS animation and a jQuery script to trigger the animation.

License

http://creativecommons.org/licenses/by/4.0/

We have made these resources available for you to incorporate them into your products under the Creative Common Attribution 4.0 International License (CC-BY 4.0). Feel free to remix and re-share these resources and documentation in your products. We’d love attribution in your app’s about screen or website, but it’s not required. The only thing we ask is that you don’t republish, redistribute or sell “as-is”.

Misc

Rather than post a load of JS and CSS here it’s probably best to get ‘down and dirty’ with the code. There’s a zip file below plus a link to the demo. As usual, if you have any comments or suggestions for improvements please share them below. Effort has been made to keep the number of files down to a minimum and naming conventions logical so that it is easy to get the gist of the examples and tweak them for your own use.


View Demo Download Zip