It's the little UI/UX touches that make your app feel alive. Let's look at 4 simple lines of CSS that can transform a boring interaction into something playful and fun.

🔗  Key Links 🔗
- https://codepen.io/Coding-in-Public/pen/KwgPmQv

---------------------------------------

🔗  Additional Links 🔗
- https://convos.dev/
- https://easingwizard.com/

---------------------------------------

🌐 Connect With Me 🌐 
- Astro course: https://learnastro.dev
- Website: https://codinginpublic.dev
- Blog: https://chrispennington.blog

🤝 Follow Me 🤝
- Twitter: https://twitter.com/cpenned
- BlueSky: https://bsky.app/profile/codinginpublic.dev

💸 Support Me 💸
- Patreon: https://www.patreon.com/coding_in_public
- Buy Me a Coffee: https://www.buymeacoffee.com/chrispennington

Coding in Public

A short CSS tutorial demonstrating how to create polished micro-interactions using just four lines of CSS. The technique combines hover background color changes using OKLCH color with opacity, a box shadow for visual depth, a scale transform on active/click state, and a custom linear easing function for a 'squishy' feel. The box shadow approach is preferred over background-with-padding because it doesn't disrupt document flow, allowing the squish animation to work smoothly. CSS nesting, modern scale property, and easing generators like Easing Wizard are used throughout.

Micro-interactions still matter