Switch by csozidev

1/* Minecraft switch made by: csozi | Website: english.csozi.hu*/
2
3/* The switch - the box around the slider */
4.switch {
5  font-size: 17px;
6  position: relative;
7  display: inline-block;
8  width: 4em;
9  height: 2em;
10}
11
12/* Hide default HTML checkbox */
13.switch input {
14  opacity: 1;
15  width: 0;
16  height: 0;
17}
18
19/* The slider */
20.slider {
21  position: absolute;
22  cursor: pointer;
23  top: 0;
24  left: 0;
25  right: 0;
26  bottom: 0;
27  background-color: #ccc;
28  transition: .4s;
29}
30
31.off {
32  position: absolute;
33  content: "";
34  height: 2em;
35  width: 2em;
36  background-color: white;
37  transition: .4s;
38  image-rendering: pixelated;
39  opacity: 1;
40}
41
42.on {
43  position: absolute;
44  content: "";
45  height: 2em;
46  width: 2em;
47  background-color: white;
48  transition: .4s;
49  image-rendering: pixelated;
50  opacity: 0;
51}
52
53.switch input:checked + .slider {
54  background-color: #ccc;
55}
56
57.switch input:focus + .slider {
58  box-shadow: 0 0 1px #ccc;
59}
60
61.switch input:checked ~ .off {
62  transform: translateX(2em);
63}
64
65.switch input:checked ~ .on {
66  transform: translateX(2em);
67  opacity: 1;
68}