Custom Switch Full Tutorial | Only HTML & CSS
Hamburger Menu to Close Icon Tutorial:
• Hamburger Menu to Close Icon | CSS An...
New to CSS Grid? Watch the full Crash Course here: • CSS Grid Crash Course | Beginners Tut...
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/M...
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: / angeladelise
Sur cette page du site, vous pouvez voir la vidéo en ligne Custom Switch Full Tutorial | Only HTML & CSS durée heure minute seconde en bonne qualité , qui a été Téléchargé par l'utilisateur Angela Design 11 mai 2020, Partagez le lien avec vos amis et connaissances, sur youtube cette vidéo a déjà été regardée 3,426 fois et il a aimé 130 téléspectateurs. Bon visionnage!
