Where Form 2220 Toggle 2023-2024

In this tutorial, we'll look at how to make the old check into a cool slider toggle. As always, the process is quite straightforward. Let's begin by first creating the traditional check. For this tutorial, we'll wrap our elements in a div, but you can use the form tag as well. So here we have our check. We may not have noticed, but to activate the check, we can click either on the "div" or on the label. This ability to click on the label is crucial to our tutorial's functionality. If we take away the label wording, we can only click the "div", but take note that the label is still present, only the text has been removed. So let's create a new label class called "my label". Give it the position of relative, display: block, with 60 pixels height and 30 pixels width, and margin-bottom 15 pixels. Add this class to your label tag. Notice nothing visible happens because there is no text for the moment. Now let's create a sliding groove element, which will act as our dynamic check or toggle switch. Set the position to absolute, with top, right, bottom, and left all set to zero. And let's give it a gray background and a border radius of 20 pixels. Add this to your check element and give our containing div or form, if you like, the class of "my label" as well. And there you have a toggle holder groove. We also need to add a slider button for our UI/UX effect. So let's create a pseudo-class of "sliding groove : after". Give it a position of absolute, content: empty within, height: 28 pixels, white background, and border radius of 50%. So it's a circle and one pixel from the top and left of the toggle holder. Okay, looking...