Browse By

Ripple Effect SVG Icon Buttons

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

If you enjoyed this article please spread the word

Divi WordPress Theme

2 thoughts on “Ripple Effect SVG Icon Buttons”

  1. Jose Tapatio says:

    Thank you for adding this. I have a question: How do make the button accept your href URL so it goes there when clicked? I added a URL in the href and is not going anywhere. When you mouse over the button you can see that the URL with my link is there, but it doesn’t work. Thanks.

    1. Simon says:

      Hello Jose, can you show me a demo of what you have done? It should simply be a case of changing the href # on the link that has the class of .btn. I know this was tested out when creating the demo, but it only works when clicking the actual icons and text inside the button. On reflection maybe there is a better way to achieve the desired result I’m not sure.

Leave a Reply

Your email address will not be published. Required fields are marked *