Shazam-Like Morphing Button Effect

This a tutorial on how to create a Shazam-like button that morphs into a music player using Snap.svg.In this tutorial you will create a Shazam-like UI where we initially have a simple button that, when clicked, morphs into a listening button.

And also some musical notes will be animated that fly from outside of the viewport to the listening button to indicate listening activity. Finally, the listening button will transform into a music player with album info of the “identified” song.

Demo    Source