Discord Made The Coolest CSS Only Input Animation

CSS Simplified Course: courses.webdevsimplified.com/css-simplified/?utm_s…

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: courses.webdevsimplified.com/css-simplified/?utm_s…
GitHub Code: github.com/WebDevSimplified/discord-search-input-c…


🌎 Find Me Here:

My Blog: blog.webdevsimplified.com/
My Courses: courses.webdevsimplified.com/
Patreon: www.patreon.com/WebDevSimplified
Twitter: twitter.com/DevSimplified
Discord: discord.gg/7StTjnR
GitHub: github.com/WebDevSimplified
CodePen: 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