Toggle Switch Button CSS only [Neumorphism]

In this video , we will learn how to create TOGGLE SWITCH button using HTML and CSS. We will first Create default TOGGLE SWITCH Button and then make it more attractive and realistic by applying NEUMORPHISM on it.

Hashtag
#html​ #css​ #javascript​ #webdevelopment​ #techgiant

background-image: linear-gradient(45deg , #3aaaf8,#00d4fc);

Note:- To apply NEUMORPHIC Affect just copy below give line and paste inside css selector of required element as I did in video.

For INSET (.toggle)
box-shadow: -8px -4px 8px 0px rgba(255, 255, 255, 0.25), 8px 4px 12px 0px rgba(0,0,0,0.25), 4px 4px 4px 0px rgba(0,0,0,0.25) inset, -4px -4px 4px 0px rgba(255,255,255,0.25) inset;

For OUTSET (.indicator)
box-shadow: -8px -4px 8px 0px rgba(255, 255, 255, 0.25), 8px 4px 12px 0 rgba(0,0,0,0.25);

If you have any doubts or found any mistakes feel free to ask in comment section.I hope you guys have enjoyed watching the video 😄.

Learn How to Create Modern Profile UI cards

Learn How to host website on internet (Most EASIEST ways)

How to create wonderfull things using HTML ,CSS and Javascript (frameworks)

Please like ,share and SUBSCRIBE to get more and more interesting videos like this one.
Also, click on the bell icon 🔔 to turn on notifications. This way you'll be notified the moment new videos are uploaded.