Discord Made The Coolest CSS Only Input Animation

CSS Simplified Course: https://courses.webdevsimplified.com/css-simplified/?utm_source=youtube&utm_medium=video-description&utm_term=video-id--dlnFPkyh9Y&utm_campaign=css-course-launch-12-2024&coupon=CSS

The search input in Discord seems simple at first, but as I was working on duplicating it I realized it was much more complex than it first appeared. In this video I will go over exactly how to create the Discord search input and all of its animations using only CSS.

📚 Materials/References:

CSS Simplified Course: https://courses.webdevsimplified.com/css-simplified/?utm_source=youtube&utm_medium=video-description&utm_term=video-id--dlnFPkyh9Y&utm_campaign=css-course-launch-12-2024&coupon=CSS GitHub Code: https://github.com/WebDevSimplified/discord-search-input-css

🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com My Courses: https://courses.webdevsimplified.com Patreon: https://www.patreon.com/WebDevSimplified Twitter: https://twitter.com/DevSimplified Discord: https://discord.gg/7StTjnR GitHub: https://github.com/WebDevSimplified CodePen: https://codepen.io/WebDevSimplified

⏱️ Timestamps:

00:00 - Introduction 01:07 - Starting Code 02:06 - Growing Width Animation 07:34 - Search/Close Icon Animation

#DiscordClone #WDS #CSS ... https://www.youtube.com/watch?v=-dlnFPkyh9Y