Hello Viewers, welcome to my other blog. In this blog, I'm going to create a toggle on-off switch by using HTML and CSS only. Earlier I have shared How to create a Password Hide or Show Toggle and now this time I will design a toggle on-off switch.
Simply toggle means a button that is used to connect or disconnected particular things. For example, our keyboard Caps Lock, when we click on caps lock light is on and when click again that button light is off. There are various design of toggle switch but the purpose of this are same.
As you can see on the given image on the webpage, there are two boxes one is in disabled form and another is enabled form, which means left is off and right is on. To make this program I have used only one input check box of HTML and a label tag. Actually, in first that box is offed, and when that toggle button is clicked that disabled text into enabled, toggle switch move right side and white color changed into blue with smooth animation.
If you are feeling difficult to understand this program, I have provided a full video tutorial of this program[Custom Checkbox Design into Toggle Switch]. I hope all your confusion will clear after watching this video which is given below.
Full Vido Tutorial of Custom Checkbox Design into Toggle Switch
As you have seen in the video in first there is one box and its all text was in white color, the toggle switch is on the left side and the right side text is in disabled form but when that toggle switch is clicked toggle button move into the right side, the white color changed into blue and text changed into enabled. It looks like the switch was on. To control the toggle switch I have used HTML (input checkbox) and "Label Tag".
If you know basic HTML & CSS then you can easily make this program[Custom Toggle ON-OFF Button] and also you can add more function and style as you wish. Those friends who are feeling difficulty to create this program, don't worry I have provided the full source code of this toggle switch below. This is free for all, you can use this program for your purposes.
To paste the given codes of this program [Custom Checkbox Design], first of all, you need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes in your files. You can also download all source codes and file from the given "Download Button" directly.
