Custom Switch Full Tutorial | Only HTML & CSS

Hamburger Menu to Close Icon Tutorial:
https://www.youtube.com/watch?v=uugicVDUzMA&t=694s

New to CSS Grid? Watch the full Crash Course here: https://www.youtube.com/watch?v=yOPCQ5nD1Vs&t=214s

In this video I go over how to create a custom switch using only HTML and CSS. I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then write all of the styling and effects with CSS. I modify a checkbox label to create the switch and then use pseudo elements for the icons. I add css transitions to create an animated interaction.

Note: Initially I created this implementation using a "i" element under the label tag. After some iteration I decided to use pseudo elements ::before and ::after instead. Therefore, in the HTML code "i" tags may be visible in the tutorial but I did not use them in the final implementation. Those tags can be ignored when creating this effect.

Codepen: https://codepen.io/angeladelise/pen/MWaOOdr

In this video I show you:
0:29 - Starting HTML Code
0:52 - HTML Code
2:49 - CSS Code
2:20 - Navbar CSS
3:24 - How to style the switch container
4:30 - How to style the label
5:53 - How to add pseudo elements with an icon
8:31 - How to change state with :checked
10:13 - How to add CSS animation effects
12:31 - How to add a color transition

Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...

#cssanimation #customanimation #pseudoelements

Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: https://medium.com/@angeladelise