Radio by kennyotsu-monochromia

#212121

1/*Design Inspired by @ykadosh on Codepen*/
2
3.wrap {
4  --black: #000000;
5  --ch-black: #141414;
6  --eer-black: #1b1b1b;
7  --night-rider: #2e2e2e;
8  --white: #ffffff;
9  --af-white: #f3f3f3;
10  --ch-white: #e1e1e1;
11  font-family: Helvetica, sans-serif;
12}
13
14.back {
15  position: absolute;
16  width: 16.6em;
17  height: 6.5em;
18  margin-top: -0.8em;
19  margin-left: -0.77em;
20  border-radius: 8px;
21  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
22  background-color: #171717;
23}
24
25.main {
26  display: flex;
27}
28
29.switch {
30  display: block;
31  position: relative;
32  background-color: black;
33  width: 70px;
34  height: 70px;
35  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px  var(--black), inset 0 2px 2px -2px  var(--white), inset 0 0 2px 5px var(--night-rider), inset 0 0 2px 22px  var(--black);
36  border-radius: 50%;
37  padding: 20px;
38  margin: 5px;
39}
40
41.switch input {
42  display: none;
43}
44
45.switch input:checked + .button .light {
46  animation: flicker 0.2s infinite 0.3s;
47}
48
49.switch input:checked + .button .shine {
50  opacity: 1;
51}
52
53.switch input:checked + .button .shadow {
54  opacity: 0;
55}
56
57.switch .button {
58  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
59  background-color: var(--night-rider);
60  width: 55px;
61  height: 55px;
62  border-radius: 50%;
63  position: relative;
64  left: -0.75em;
65  top: -0.79em;
66  cursor: pointer;
67}
68
69.switch .light {
70  opacity: 0;
71  animation: light-off 1s;
72  position: absolute;
73  width: 100%;
74  height: 100%;
75  background-image: radial-gradient(var(--ch-white), var(--white) 70%, transparent 72%);
76}
77
78.switch .dots {
79  position: absolute;
80  width: 100%;
81  height: 100%;
82  background-image: radial-gradient(transparent 30%, var(--black) 70%);
83  background-size: 10px 10px;
84  border-radius: 50%;
85}
86
87@keyframes flicker {
88  0% {
89    opacity: 1;
90  }
91
92  80% {
93    opacity: 0.8;
94  }
95
96  100% {
97    opacity: 1;
98  }
99}
100
101@keyframes light-off {
102  0% {
103    opacity: 1;
104  }
105
106  80% {
107    opacity: 0;
108  }
109}
110
111.switch1 {
112  display: block;
113  position: relative;
114  background-color: var(--black);
115  width: 70px;
116  height: 70px;
117  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px  var(--black), inset 0 2px 2px -2px  var(--white), inset 0 0 2px 5px var(--night-rider), inset 0 0 2px 22px  var(--black);
118  border-radius: 50%;
119  padding: 20px;
120  margin: 5px;
121}
122
123.switch1 input {
124  display: none;
125}
126
127.switch1 input:checked + .button .light {
128  animation: flicker 0.2s infinite 0.3s;
129}
130
131.switch1 input:checked + .button .shine {
132  opacity: 1;
133}
134
135.switch1 input:checked + .button .shadow {
136  opacity: 0;
137}
138
139.switch1 .button {
140  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
141  background-color: var(--night-rider);
142  width: 55px;
143  height: 55px;
144  border-radius: 50%;
145  position: relative;
146  left: -0.75em;
147  top: -0.79em;
148  cursor: pointer;
149}
150
151.switch1 .light {
152  opacity: 0;
153  animation: light-off 1s;
154  position: absolute;
155  width: 100%;
156  height: 100%;
157  background-image: radial-gradient(var(--ch-white), var(--white) 70%, transparent 72%);
158}
159
160.switch1 .dots {
161  position: absolute;
162  width: 100%;
163  height: 100%;
164  background-image: radial-gradient(transparent 30%, var(--black) 70%);
165  background-size: 10px 10px;
166  border-radius: 50%;
167}
168
169.switch2 {
170  display: block;
171  position: relative;
172  background-color: var(--black);
173  width: 70px;
174  height: 70px;
175  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px  var(--black), inset 0 2px 2px -2px  var(--white), inset 0 0 2px 5px var(--night-rider), inset 0 0 2px 22px  var(--black);
176  border-radius: 50%;
177  padding: 20px;
178  margin: 5px;
179}
180
181.switch2 input {
182  display: none;
183}
184
185.switch2 input:checked + .button .light {
186  animation: flicker 0.2s infinite 0.3s;
187}
188
189.switch2 input:checked + .button .shine {
190  opacity: 1;
191}
192
193.switch2 input:checked + .button .shadow {
194  opacity: 0;
195}
196
197.switch2 .button {
198  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
199  background-color: var(--night-rider);
200  width: 55px;
201  height: 55px;
202  border-radius: 50%;
203  position: relative;
204  left: -0.75em;
205  top: -0.79em;
206  cursor: pointer;
207}
208
209.switch2 .light {
210  opacity: 0;
211  animation: light-off 1s;
212  position: absolute;
213  width: 100%;
214  height: 100%;
215  background-image: radial-gradient(var(--ch-white), var(--white) 70%, transparent 72%);
216}
217
218.switch2 .dots {
219  position: absolute;
220  width: 100%;
221  height: 100%;
222  background-image: radial-gradient(transparent 30%, var(--black) 70%);
223  background-size: 10px 10px;
224  border-radius: 50%;
225}

/*Design Inspired by @ykadosh on Codepen*/

.wrap {
  --black: #000000;
  --ch-black: #141414;
  --eer-black: #1b1b1b;
  --night-rider: #2e2e2e;
  --white: #ffffff;
  --af-white: #f3f3f3;
  --ch-white: #e1e1e1;
  font-family: Helvetica, sans-serif;
}

.back {
  position: absolute;
  width: 16.6em;
  height: 6.5em;
  margin-top: -0.8em;
  margin-left: -0.77em;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
  background-color: #171717;
}

.main {
  display: flex;
}

.switch {
  display: block;
  position: relative;
  background-color: black;
  width: 70px;
  height: 70px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px  var(--black), inset 0 2px 2px -2px  var(--white), inset 0 0 2px 5px var(--night-rider), inset 0 0 2px 22px  var(--black);
  border-radius: 50%;
  padding: 20px;
  margin: 5px;
}

.switch input {
  display: none;
}

.switch input:checked + .button .light {
  animation: flicker 0.2s infinite 0.3s;
}

.switch input:checked + .button .shine {
  opacity: 1;
}

.switch input:checked + .button .shadow {
  opacity: 0;
}

.switch .button {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  background-color: var(--night-rider);
  width: 55px;
  height: 55px;
  border-radius: 50%;
  position: relative;
  left: -0.75em;
  top: -0.79em;
  cursor: pointer;
}

.switch .light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(var(--ch-white), var(--white) 70%, transparent 72%);
}

.switch .dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 30%, var(--black) 70%);
  background-size: 10px 10px;
  border-radius: 50%;
}

@keyframes flicker {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 0.8;
  }

  100% {
    opacity: 1;
  }
}

@keyframes light-off {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 0;
  }
}

.switch1 {
  display: block;
  position: relative;
  background-color: var(--black);
  width: 70px;
  height: 70px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px  var(--black), inset 0 2px 2px -2px  var(--white), inset 0 0 2px 5px var(--night-rider), inset 0 0 2px 22px  var(--black);
  border-radius: 50%;
  padding: 20px;
  margin: 5px;
}

.switch1 input {
  display: none;
}

.switch1 input:checked + .button .light {
  animation: flicker 0.2s infinite 0.3s;
}

.switch1 input:checked + .button .shine {
  opacity: 1;
}

.switch1 input:checked + .button .shadow {
  opacity: 0;
}

.switch1 .button {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  background-color: var(--night-rider);
  width: 55px;
  height: 55px;
  border-radius: 50%;
  position: relative;
  left: -0.75em;
  top: -0.79em;
  cursor: pointer;
}

.switch1 .light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(var(--ch-white), var(--white) 70%, transparent 72%);
}

.switch1 .dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 30%, var(--black) 70%);
  background-size: 10px 10px;
  border-radius: 50%;
}

.switch2 {
  display: block;
  position: relative;
  background-color: var(--black);
  width: 70px;
  height: 70px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px  var(--black), inset 0 2px 2px -2px  var(--white), inset 0 0 2px 5px var(--night-rider), inset 0 0 2px 22px  var(--black);
  border-radius: 50%;
  padding: 20px;
  margin: 5px;
}

.switch2 input {
  display: none;
}

.switch2 input:checked + .button .light {
  animation: flicker 0.2s infinite 0.3s;
}

.switch2 input:checked + .button .shine {
  opacity: 1;
}

.switch2 input:checked + .button .shadow {
  opacity: 0;
}

.switch2 .button {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  background-color: var(--night-rider);
  width: 55px;
  height: 55px;
  border-radius: 50%;
  position: relative;
  left: -0.75em;
  top: -0.79em;
  cursor: pointer;
}

.switch2 .light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(var(--ch-white), var(--white) 70%, transparent 72%);
}

.switch2 .dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 30%, var(--black) 70%);
  background-size: 10px 10px;
  border-radius: 50%;
}

Toggle prefixes

833 views

Variation of aradio

Copy to Figma

833 views

Variation of aradio

Comments

MIT License

Copyright - 2024 Praashoo7 
Copyright - 2024 Praashoo7 (Prashant) 
Copyright - 2024 kennyotsu-monochromia (kennyotsu monochromia) 

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.