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
Top comments (0)