Hey coders! I'm CodingPorium here! In this post, i will be uploading the source codes for this project. I have added comments for most lines to help you understand the code easily.

In this project, the toggle switch is basically split into 3. Firstly, the base itself without any slider or circle on it. Second, the circle slider overlaying on the base. Thirdly, the color that slides when the toggle switch is toggled/clicked/checked. If you can't understand what I'm saying, you can watch my video below. You can also download the source code below. Thanks!



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<html>
  <head>
    <title>How to Make Custom Toggle Switch using HTML & CSS</title>
    <meta name="vieport" content="width=device-width, initial-scale=1">
<style>
/*Code for the switch base*/
.switch{
  position:relative;
  display:inline-block;
  width:60px;
  height:34px;
}
.switch input{
  opacity:0;
  width:0;
  height:0;
}
/*Code for the sliding effect*/
.slider{
  position: absolute;
  cursor:pointer;
  top:0;
  left:0;
  right:0;
  bottom:0,
  background-color:#ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

/*Code to give color to the slider when checked*/
input:checked + .slider{
  background-color:#6b58e8;
}
/*Code to give movement for the slider*/
input:checked + .slider:before{
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform:translateX(26px);

}
/*Code for a rounded toggle switch*/
.slider.round{
  border-radius:34px;
}
.slider.round:before{
  border-radius:50%;
}
</style>
</head>
<body>
  <!--The toggle switch-->
<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>
</body>
</html>
Tags

2 Comments

Post a Comment

Previous Post Next Post