A mirror of my website's source code.

By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

 switch-final.txt

View raw Download
text/html • 987 B
HTML document, ASCII text
        
            
1
<!DOCTYPE html>
2
<html>
3
4
<head>
5
<style>
6
:root {
7
background: #000;
8
color: #fff;
9
}
10
input[type=checkbox].switch {
11
-webkit-appearance: none;
12
-moz-appearance: none;
13
appearance: none;
14
position: relative;
15
background: #fff;
16
width: 30px;
17
height: 16px;
18
}
19
input[type=checkbox].switch::before {
20
top: 1px;
21
left: 1px;
22
position: absolute;
23
display: block;
24
background-color: #ff5c1c;
25
content: "";
26
width: 14px;
27
height: 14px;
28
transition: background-color .5s, left .5s;
29
}
30
input[type=checkbox].switch:checked::before {
31
left: 15px; /* .switch width - .switch::before width - 1px */
32
background-color: #3f9b00;
33
}
34
</style>
35
</head>
36
37
<body>
38
<input type="checkbox" class="switch" />
39
</body>
40
41
</html>