CSS-Only Toggle Switch
10.2K views · 2022-08-15
UI Design
Toggle switches are a useful way to show a UI’s state. It’s commonly believed that these are hard to create and require JavaScript. That’s simply not the case. Follow along as I walk you through how to create a toggle switch with just CSS! Want to learn more? https://trhouse.co/3IBifrN Join Treehouse today and start your free trial!
Blog article:
https://trhouse.co/3OBuwQD
GitHub link:
https://github.com/treehouse/css-toggle-switch
Codepen link:
https://codepen.io/dustin-usey/pen/JjLLbjJ
0:00 Intro
0:57 Getting started with HTML
1:15 input CSS
1:21 input ::after pseudo element
3:20 input :checked pseudo class
3:30 input ::after pseudo element with :checked pseudo class
3:48 Outro
Learn how to build websites and apps, write code, or start a business at Treehouse. Learn from over 1,000 videos created by our expert teachers on web design, coding, business, and much more. Treehouse teaches the in-demand technology skills you need to land your dream job.
#coding #programming #css #development
Follow Us!
Twitter: https://twitter.com/treehouse
Instagram: https://instagram.com/teamtreehouse
LinkedIn: https://www.linkedin.com/school/treehouse-island-inc-/
Facebook: https://www.facebook.com/teamtreehouse/
Blog article:
https://trhouse.co/3OBuwQD
GitHub link:
https://github.com/treehouse/css-toggle-switch
Codepen link:
https://codepen.io/dustin-usey/pen/JjLLbjJ
0:00 Intro
0:57 Getting started with HTML
1:15 input CSS
1:21 input ::after pseudo element
3:20 input :checked pseudo class
3:30 input ::after pseudo element with :checked pseudo class
3:48 Outro
Learn how to build websites and apps, write code, or start a business at Treehouse. Learn from over 1,000 videos created by our expert teachers on web design, coding, business, and much more. Treehouse teaches the in-demand technology skills you need to land your dream job.
#coding #programming #css #development
Follow Us!
Twitter: https://twitter.com/treehouse
Instagram: https://instagram.com/teamtreehouse
LinkedIn: https://www.linkedin.com/school/treehouse-island-inc-/
Facebook: https://www.facebook.com/teamtreehouse/