Radio by Praashoo7

Posted by

@Praashoo7

Theme:

Dark

#realistic#radio#traffic-lights

#212121

393 views

Add prefixes

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

/*Design Inspired by @ykadosh on Codepen*/

.back {
  position: absolute;
  width: 16.6em;
  height: 6.5em;
  margin-top: -0.8em;
  margin-left: -0.77em;
  border-radius: 70px;
  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 black, inset 0 2px 2px -2px white, inset 0 0 2px 5px #47434c, inset 0 0 2px 22px 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: #9b0621;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  position: relative;
  left: -0.75em;
  top: -0.75em;
  cursor: pointer;
}

.switch .light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
}

.switch .dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 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: black;
  width: 70px;
  height: 70px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 5px #47434c, inset 0 0 2px 22px 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: #949207;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  position: relative;
  left: -0.75em;
  top: -0.785em;
  cursor: pointer;
}

.switch1 .light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#f6ff7e, #eeff00 40%, transparent 70%);
}

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

.switch2 {
  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 black, inset 0 2px 2px -2px white, inset 0 0 2px 5px #47434c, inset 0 0 2px 22px 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: #2f9407;
  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(#f6ff7e, #00ff00 40%, transparent 70%);
}

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

Variations

Get code

Link to button

Praashoo7

Prashant

MIT License

Copyright - 2023 Praashoo7 (Prashant) 

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.