How To Create Toggle Switch by using HTML and CSS?

A toggle switch allows users to switch between two states, typically "on" and "off," and is commonly used in forms and interactive elements. To create a toggle switch, we will use HTML and CSS. We can add different styles to the checkbox element to create a toggle switch.

1. Basic Circular Toggle Switch

The simplest way to create a toggle switch is to use an HTML checkbox input and style it with CSS to look like a switch.

Output: Using transform and translateX, we can shift the circular slider when the checkbox is checked.

2. Square Toggle Switch

For a modern look, let’s create a square toggle switch by adjusting the border-radius properties.

Explanation

• .square .slider: Removes full rounding from the switch track and gives a slight rounding of 4px for a softer square.
• .square .slider:before: Makes the toggle button a square with border-radius: 0

Output

HTML and CSS both are foundation of webpages. HTML is used for webpage development by structuring websites, web apps and CSS used for styling websites and webapps. You can learn more about HTML and CSS from the links given below:

• HTML Tutorial and HTML Examples.
• CSS Tutorial and CSS Examples.