I was browsing Dribbble the other day and ran across this cool animation created by Dribbble user Toxinboy.
I really like it, but because it’s a gif, you can’t really do anything with it in a website. Change the background color, mouse over effect, click events, etc. Simple things aren’t doable unless it’s created from code.
So, I created this.
The button is a combination of SVG shapes. A few different animations. The most complex is a line animation. Read more about it here. I used D3.js to create and animate the shapes, but that is definitely not a requirement. Just a library I’m very comfortable using.