html

CSS Toggle Switch

“In CSS, the switch is used to provide a way for the user to select any one state, either on or off. The toggle switch is something that we have to move left or right. We use the toggle switches for on and off or for yes or no. We use these switches on our websites, mobile apps, and software. When we turn off or on some element or select yes or no, we have toggle switches there. We have different types of toggle switches available in CSS. We will create toggle switches by using HTML and CSS here in this guide. We will explain how to create these toggle switches in detail and explain how these toggle switches work.”

Example 1

We will write some HTML code for creating and styling toggle switches in CSS. For demonstrating the given examples, we’re using Visual Studio Code. As a result, we will open the new file and pick the language “HTML,” which follows in creating an HTML file. Then we begin to write the code in the file created here. We have to save this code when it’s finished, and the “.html” file extension is automatically added to the file name. We also create some text which we want to present in bold, so we are using “<b>” and write the line inside these “<b>” opening and closing tags. After this, we will create a toggle switch here in this code that represents off or on. It will allow us to turn off or on the switch. Now, we are moving towards the CSS code for giving some style to this toggle switch.

First, we align all the body elements using “text-align” to the “center” and apply this property to the “body.” Then, change the “color” of the heading to “green” to make it attractive. Now, we have to style the “toggle.” We use “toggle” and then use the styling properties here. The “display” we are using here is “inline-block.” We also set its “width” and “height” to “100px” and “52px,” respectively. The “background-color” of this toggle is “red,” and its “border-radius” is “30px,” so its edges are curved.

Then we also set a “border” around this toggle button of “2px” width in “solid” type and also in “grey” color. After styling this, we are going to use the “after” selector with this “toggle,” and as we know that we must have “content” when we use this “after” selector in CSS. After this content, we are setting its “position” here to “absolute,” and the “width” and “height” is “50px” each. This time the “background-color” is “grey.” We also set its “top” and “left” to “1px” for each of them. We are applying the “transition” on this toggle of “0.5s”. The styling for the “toggle: after” is completed here, and we will style the paragraph a little bit using two properties inside the curly braces of “p.”

We just change its “font-family” to “Algerian” and then “bold” this paragraph using the “font-weight” property. We are setting the “left” to “45px” so it moves “45px” when this toggle is checked. And its color changes to “green.” Also, set this “display” of the “checkbox” to “none.”

We also show this switch in the output below, and in the first output, you can see that we have two possibilities here in this switch. In this screenshot, the switch is “off,” and its color is “red.”

In the second screenshot, this switch is “on,” and it is “green” in color. The off is written on the right side of the switch, so if we want to turn off this switch, then we click on this switch to move it to the right side to off this switch.

Example 2

In the second example, we will create two different toggle switches. We create two switches one switch is named “subscribe,” and the other switch is named “Newsletter” here. Then we will style these switches in the CSS file.

We are styling the “body” of the HTML, so we set its “margin” and “padding” to “0,” and the background-color for this is “black,” as here, “#151515” is the code for the “black.” We are setting the div, which is named “center,” to the “absolute” “position” center, so all the elements inside this div will render in the “center” of the page. The “top” and “bottom” of the absolute position center are set as “50px” for each, and then we use the “transform-translate” property to “(-50px, -50px)”.

When we use all these, all the elements are set in the center vertically and horizontally. Then, we style the “input [type=checkbox]” using this. The “margin” we use for this is “10px” and “relative” in “position.” The “width” of this checkbox is “120px” and also “40px” in its height. We also set its “webkit-appearance” to “none.” We are using its “background” in the “linear-gradient” form. The “outline” for this is also “none,” and for making its edges curve, we are using the “border-radius” property here and set it to “20px”. We apply the “box-shadow” and set its value to “0 0 0 4px”. Then we style the checkbox when it is checked and set its “background” to “linear-gradient,” which is “0deg” and “orange.” We use the same “box-shadow” here as we used above, and this is for the “nth-of-type (1)”. The “nth-of-type” is a selector for selecting one or more elements. We also style the checked checkbox for the “nth-of-type (2)” and set its “background” to the “linear-gradient” of “0deg” and “blue.” We also style the checkbox when it is not checked. So here, we use the “before” selector, and the “after” or “before” selector must have a “content.” The “position” we set here is “absolute,” and its “top” is “0” and also the same for the “left.” It is “80px” in its “width” and “40px” in “height.” We again use the “linear-gradient” for the “background.” This time we use “black” and “grey” color. We also use the “transform” property and “scale” it to x, y as “0.98, 0.96”. We set its “transition” property to “0.5s”. The “left” is set to “40px” before being checked. We also use the “after” selector and also style this.

Inside this “after” selection, we first set the “content” and its “position” as “absolute.” Its “top” sets as “50% – 2px” and “left” is “70px”. We also set its “width” and “height” to “4px” each. We set its “background” and use “linear-gradient” here again. The “50%” of the “border-radius” is applied here, so its edges appear in a curve shape. The “transition” property is also set to “0.5s,” which is used for controlling an animation speed of 0.5sec. In the “after” selector, the “left” is set to “110px”.

We want to style the headings using “h1” and use some properties here. The “margin” is “0,” and the “padding” is also “0”. We use the “sans-serif” “font-family” for these headings. Also, align these headings to the “center.” The font “color” of these headings is “white” and “16px” in size. We also set the top and bottom “padding” to “15px” and “0px” for the left and right. We use “upper-case” so the headings text will be converted to the uppercase, and the “letter-spacing” is “4px” for all headings.

We have provided two screenshots here as the output. The first output shows before this toggle switch is checked, and the second screenshot is when we checked both toggle switches.

Conclusion

We have presented this guide to explain the toggle switch in CSS and how to design and style the toggle switch in CSS. We have discussed that we use the toggle switch when we want to choose between on/off and yes/no. We have explored two codes here and have explained all the properties we use in our codes in detail. After trying the codes in this guide, you will easily learn how these toggle switches work in CSS and how you will design toggle switches on your website or projects.

About the author

Aqsa Yasin

I am a self-motivated information technology professional with a passion for writing. I am a technical writer and love to write for all Linux flavors and Windows.