#7daysOfButtons Heart Button – diving in on SVG animations

See the Pen button2 by Brian Best (@brianbest) on CodePen.5308

This was perhaps one of the hardest buttons I’ve ever made myself code. I wanted to push myself and make something I’ve never made before. So my inspiration was the “like” button in Facebook Messenger, the one that grows the longer you hold it. The other button that inspired me was the Medium clap button where for the longer you hold the button the bigger the value the claps become. So this is my heart the longer you press it the more it fills up till its finally full. I really want to get that ‘fill up’ animation right, and to do it I used SVG animations, but I had no idea how to make that work. After a ton of trial and error I got it working the way I wanted!

Site Footer