Switch by mobinkakei

Posted by

@mobinkakei

Theme:

Dark

#switch#dark#theme#light

#212121

14K views

Add prefixes

1.toggleWrapper {
2  position: absolute;
3  top: 50%;
4  left: 50%;
5  overflow: hidden;
6  padding: 0 200px;
7  transform: translate3d(-50%, -50%, 0);
8  color: white;
9}
10
11.toggleWrapper input {
12  position: absolute;
13  left: -99em;
14}
15
16.toggle {
17  cursor: pointer;
18  display: inline-block;
19  position: relative;
20  width: 90px;
21  height: 50px;
22  background-color: #83d8ff;
23  border-radius: 84px;
24  transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
25}
26
27.toggle:before {
28  content: 'AM';
29  position: absolute;
30  left: -50px;
31  top: 15px;
32  font-size: 18px;
33}
34
35.toggle:after {
36  content: 'PM';
37  position: absolute;
38  right: -48px;
39  top: 15px;
40  font-size: 18px;
41  color: #749ed7;
42}
43
44.toggle__handler {
45  display: inline-block;
46  position: relative;
47  z-index: 1;
48  top: 3px;
49  left: 3px;
50  width: 44px;
51  height: 44px;
52  background-color: #ffcf96;
53  border-radius: 50px;
54  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
55  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
56  transform: rotate(-45deg);
57}
58
59.toggle__handler .crater {
60  position: absolute;
61  background-color: #e8cda5;
62  opacity: 0;
63  transition: opacity 200ms ease-in-out;
64  border-radius: 100%;
65}
66
67.toggle__handler .crater--1 {
68  top: 18px;
69  left: 10px;
70  width: 4px;
71  height: 4px;
72}
73
74.toggle__handler .crater--2 {
75  top: 28px;
76  left: 22px;
77  width: 6px;
78  height: 6px;
79}
80
81.toggle__handler .crater--3 {
82  top: 10px;
83  left: 25px;
84  width: 8px;
85  height: 8px;
86}
87
88.star {
89  position: absolute;
90  background-color: #fff;
91  transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
92  border-radius: 50%;
93}
94
95.star--1 {
96  top: 10px;
97  left: 35px;
98  z-index: 0;
99  width: 30px;
100  height: 3px;
101}
102
103.star--2 {
104  top: 18px;
105  left: 28px;
106  z-index: 1;
107  width: 30px;
108  height: 3px;
109}
110
111.star--3 {
112  top: 27px;
113  left: 40px;
114  z-index: 0;
115  width: 30px;
116  height: 3px;
117}
118
119.star--4, .star--5, .star--6 {
120  opacity: 0;
121  transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
122}
123
124.star--4 {
125  top: 16px;
126  left: 11px;
127  z-index: 0;
128  width: 2px;
129  height: 2px;
130  transform: translate3d(3px, 0, 0);
131}
132
133.star--5 {
134  top: 32px;
135  left: 17px;
136  z-index: 0;
137  width: 3px;
138  height: 3px;
139  transform: translate3d(3px, 0, 0);
140}
141
142.star--6 {
143  top: 36px;
144  left: 28px;
145  z-index: 0;
146  width: 2px;
147  height: 2px;
148  transform: translate3d(3px, 0, 0);
149}
150
151input:checked + .toggle {
152  background-color: #749dd6;
153}
154
155input:checked + .toggle:before {
156  color: #749ed7;
157}
158
159input:checked + .toggle:after {
160  color: #fff;
161}
162
163input:checked + .toggle .toggle__handler {
164  background-color: #ffe5b5;
165  transform: translate3d(40px, 0, 0) rotate(0);
166}
167
168input:checked + .toggle .toggle__handler .crater {
169  opacity: 1;
170}
171
172input:checked + .toggle .star--1 {
173  width: 2px;
174  height: 2px;
175}
176
177input:checked + .toggle .star--2 {
178  width: 4px;
179  height: 4px;
180  transform: translate3d(-5px, 0, 0);
181}
182
183input:checked + .toggle .star--3 {
184  width: 2px;
185  height: 2px;
186  transform: translate3d(-7px, 0, 0);
187}
188
189input:checked + .toggle .star--4, input:checked + .toggle .star--5, input:checked + .toggle .star--6 {
190  opacity: 1;
191  transform: translate3d(0, 0, 0);
192}
193
194input:checked + .toggle .star--4 {
195  transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
196}
197
198input:checked + .toggle .star--5 {
199  transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
200}
201
202input:checked + .toggle .star--6 {
203  transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
204}
205

.toggleWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  padding: 0 200px;
  transform: translate3d(-50%, -50%, 0);
  color: white;
}

.toggleWrapper input {
  position: absolute;
  left: -99em;
}

.toggle {
  cursor: pointer;
  display: inline-block;
  position: relative;
  width: 90px;
  height: 50px;
  background-color: #83d8ff;
  border-radius: 84px;
  transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.toggle:before {
  content: 'AM';
  position: absolute;
  left: -50px;
  top: 15px;
  font-size: 18px;
}

.toggle:after {
  content: 'PM';
  position: absolute;
  right: -48px;
  top: 15px;
  font-size: 18px;
  color: #749ed7;
}

.toggle__handler {
  display: inline-block;
  position: relative;
  z-index: 1;
  top: 3px;
  left: 3px;
  width: 44px;
  height: 44px;
  background-color: #ffcf96;
  border-radius: 50px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: rotate(-45deg);
}

.toggle__handler .crater {
  position: absolute;
  background-color: #e8cda5;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
  border-radius: 100%;
}

.toggle__handler .crater--1 {
  top: 18px;
  left: 10px;
  width: 4px;
  height: 4px;
}

.toggle__handler .crater--2 {
  top: 28px;
  left: 22px;
  width: 6px;
  height: 6px;
}

.toggle__handler .crater--3 {
  top: 10px;
  left: 25px;
  width: 8px;
  height: 8px;
}

.star {
  position: absolute;
  background-color: #fff;
  transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  border-radius: 50%;
}

.star--1 {
  top: 10px;
  left: 35px;
  z-index: 0;
  width: 30px;
  height: 3px;
}

.star--2 {
  top: 18px;
  left: 28px;
  z-index: 1;
  width: 30px;
  height: 3px;
}

.star--3 {
  top: 27px;
  left: 40px;
  z-index: 0;
  width: 30px;
  height: 3px;
}

.star--4, .star--5, .star--6 {
  opacity: 0;
  transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.star--4 {
  top: 16px;
  left: 11px;
  z-index: 0;
  width: 2px;
  height: 2px;
  transform: translate3d(3px, 0, 0);
}

.star--5 {
  top: 32px;
  left: 17px;
  z-index: 0;
  width: 3px;
  height: 3px;
  transform: translate3d(3px, 0, 0);
}

.star--6 {
  top: 36px;
  left: 28px;
  z-index: 0;
  width: 2px;
  height: 2px;
  transform: translate3d(3px, 0, 0);
}

input:checked + .toggle {
  background-color: #749dd6;
}

input:checked + .toggle:before {
  color: #749ed7;
}

input:checked + .toggle:after {
  color: #fff;
}

input:checked + .toggle .toggle__handler {
  background-color: #ffe5b5;
  transform: translate3d(40px, 0, 0) rotate(0);
}

input:checked + .toggle .toggle__handler .crater {
  opacity: 1;
}

input:checked + .toggle .star--1 {
  width: 2px;
  height: 2px;
}

input:checked + .toggle .star--2 {
  width: 4px;
  height: 4px;
  transform: translate3d(-5px, 0, 0);
}

input:checked + .toggle .star--3 {
  width: 2px;
  height: 2px;
  transform: translate3d(-7px, 0, 0);
}

input:checked + .toggle .star--4, input:checked + .toggle .star--5, input:checked + .toggle .star--6 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

input:checked + .toggle .star--4 {
  transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

input:checked + .toggle .star--5 {
  transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

input:checked + .toggle .star--6 {
  transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

mobinkakei

MIT License

Copyright - 2023 mobinkakei  

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.