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
On this page of the site you can watch the video online Custom Switch Full Tutorial | Only HTML & CSS with a duration of hours minute second in good quality, which was uploaded by the user Angela Design 11 May 2020, share the link with friends and acquaintances, this video has already been watched 3,426 times on youtube and it was liked by 130 viewers. Enjoy your viewing!
