SMASH that Like Button! | Particle & ripple button Valentine's animation tutorial | @keyframers 2.33

Celebrate Valentine's Day with us as we pour our hearts into this fun Like button (Love button, Heart button, whatever you'd call it!) using pure CSS animation to create fancy particles and ripples on :focus.

• 💡 Inspiration: https://dribbble.com/shots/6500093-Like-Button-Animation-Press-L
• 📺 Video: https://youtu.be/may0MddSzNc
• 💻 Code: https://cdpn.io/poJjQbj

Additional Resources:

• MoJS https://github.com/mojs/mojs
• https://tympanus.net/Development/Animocons/
• Expanding Video Player: https://youtu.be/_p43D7G-iyk

Like what we're doing? There are many ways you can support @keyframers so we can keep live coding awesome animations!

• Like & subscribe on YouTube at https://youtube.com/keyframers
• Buy web dev shirts, stickers & more at https://keyframe.rs/merch
• Follow & tweet us at https://twitter.com/keyframers.
• Support us on Patreon at https://patreon.com/keyframers

Topics covered:

• Buttons: styling, overriding defaults and layout gotchas.
• SVG
• Particle effects with CSS variables
• Ripple animation on Click