Fun button effect with HTML, CSS & JS

From the creator

Try Brilliant with a 30-day free trial, and get 20% off an annual subscription 👉 https://brilliant.org/KevinPowell/ Looking to step up your CSS? I have free and premium courses 👉 https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=glassybutton 🔗 Links ✅ Patrick Hill's Dribbble shot that inspired this video: https://dribbble.com/shots/22117329-Glass-Buttons ✅ Finished Code: https://codepen.io/kevinpowell/pen/LYvBZyb ⌚ Timestamps 00:00 - Introduction 01:27 - Creating the hover state 03:17 - Using a pseudo-element for the coloured part 05:45 - The problem with the current setup 07:21 - Solution to the stacking context issue 10:10 - Adding some locally scoped custom props 12:00 - Adding the blurred effect 14:04 - Improving the pseudo-element on hover 15:28 - Adding more controls through custom properties 18:46 - Creating the "pressed" state 21:37 - Adding the graniness 26:57 - The outline 30:49 - Starting the JavaScript 34:54 - Moving the pseudo-element 37:55 - Making sure it has a smooth transition 42:00 - Limiting how much the pseudo-element moves #css -- Come hang out with other dev's in my Discord Community 💬 https://discord.gg/nTYCvrK Keep up to date with everything I'm up to ✉ https://www.kevinpowell.co/newsletter Come hang out with me live every Monday on Twitch! 📺 https://www.twitch.tv/kevinpowellcss --- Help support my channel 👨‍🎓 Get a course: https://www.kevinpowell.co/courses 👕 Buy a shirt: https://teespring.com/stores/making-t

Published 2024-04-18 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.