Beautiful Toggle Switch Using HTML & CSS

This HTML and CSS code defines a stylish and interactive toggle switch with an associated checkbox. The toggle switch is presented as a sleek rectangular container with rounded corners and a background color. A circular knob, represented by a pseudo-element, slides smoothly within the switch to visually indicate the on/off state.

HTML Code:

1<label>
2  <input class="checkbox" type="checkbox" checked />
3  <div class="toggle-switch"></div>
4</label>
5

CSS Code:

1.toggle-switch {
2  background-color: #ccc;
3  height: 15px;
4  width: 50px;
5  border-radius: 15px;
6  position: relative;
7  cursor: pointer;
8  transition: background-color 0.25s;
9}
10
11.toggle-switch:before {
12  content: '';
13  background-color: #fff;
14  height: 20px;
15  width: 20px;
16  position: absolute;
17  top: -2px;
18  left: -2px;
19  border-radius: 50px;
20  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.25);
21  transition: left 0.25s;
22}
23
24.checkbox {
25  visibility: hidden;
26}
27
28.checkbox:checked + .toggle-switch {
29  background-color: #7446ff;
30}
31
32.checkbox:checked + .toggle-switch:before {
33  left: 32px;
34}
35

In summary, this HTML and CSS code presents an aesthetically pleasing and user-friendly toggle switch, seamlessly integrating form and function. The combination of a hidden checkbox and carefully crafted styles produces a toggle switch with smooth transitions, rounded edges, and a visually appealing sliding knob. The design is not only visually engaging but also intuitive, providing users with a clear and interactive way to control an on/off state.