Radio by Pradeepsaranbishnoi

#212121

1.form {
2  display: flex;
3}
4
5.input {
6  color: var(--fg);
7  font: 1em/1.5 Helvetica, sans-serif;
8}
9
10.form, .label {
11  width: 100%;
12}
13
14.form {
15  margin: auto;
16  max-width: 24em;
17  padding: 0 1.5em;
18}
19
20.label {
21  display: block;
22  text-align: center;
23  color: rgb(132, 248, 0);
24  -webkit-tap-highlight-color: transparent;
25}
26
27.label:first-child .input {
28  border-radius: 0.5em 0 0 0.5em;
29  box-shadow: 0.1em 0 0 #2726267f inset,
30		-0.1em 0 0 #27262600 inset,
31		0 0.1em 0 #afa490 inset,
32		0 -0.1em 0 #ffffff3f,
33		0 0.2em 0.5em #0000007f,
34		0 -0.1em 0 #926086 inset,
35		-0.1em -0.2em 0 #ffffff7f inset,
36		0.2em 0 0 #ffffff7f inset;
37}
38
39.label:last-child .input {
40  border-radius: 0 0.5em 0.5em 0;
41  box-shadow: 0 -0.1em 0 #926086 inset,
42		0.1em 0 0 #2726267f inset,
43		-0.1em 0 0 #2726267f inset,
44		0 0.1em 0 #afa490 inset,
45		-0.1em 0 0 #afa490 inset,
46		0 -0.1em 0 #ffffff3f,
47		0 0.2em 0.5em #0000007f,
48		-0.1em -0.1em 0 0.1em #ffffff7f inset;
49}
50
51.label:first-child .input:checked {
52  box-shadow: 0.1em 0 0 #272626af inset,
53		-0.1em 0 0 #272626 inset,
54		0 0.1em 0 #847a62 inset,
55		0 -0.1em 0 #ffffff3f,
56		0 0.1em 0 #ffffff7f,
57		0 -0.1em 0 #722257 inset,
58		-0.1em -0.2em 0 #ffffff7f inset,
59		0.2em 0 0 #ffffff7f inset;
60}
61
62.label:last-child .input:checked {
63  box-shadow: 0.1em 0 0 #272626af inset,
64		-0.1em 0 0 #272626 inset,
65		0 -0.1em 0 #722257 inset,
66		0 0.1em 0 #847a62 inset,
67		-0.1em 0 0 #847a62 inset,
68		0 -0.1em 0 #ffffff3f,
69		0 0.1em 0 #ffffff7f,
70		-0.1em -0.1em 0 0.1em #ffffff7f inset;
71}
72
73.input {
74  background-image: linear-gradient(#ffffff 33%,#414751 58%,#837b52,#c5baa1,#c3adaa);
75  border-radius: 0;
76  box-shadow: 0.1em 0 0 #2726267f inset,
77		-0.1em 0 0 #27262600 inset,
78		0 0.1em 0 #afa490 inset,
79		0 -0.1em 0 #ffffff3f,
80		0 0.2em 0.5em #0000007f,
81		0 -0.1em 0 #926086 inset,
82		-0.1em -0.2em 0 #ffffff7f inset;
83  cursor: pointer;
84  display: block;
85  margin-bottom: 0.5em;
86  width: 100%;
87  height: 1em;
88  transition: box-shadow var(--transDur) ease-in-out;
89  -webkit-appearance: none;
90  -moz-appearance: none;
91  appearance: none;
92}
93
94.input:checked {
95  background-image: linear-gradient(#ffffff 33%,#414751 58%,#827a7b,#c0b6ac,#c3adaa);
96  box-shadow: 0.1em 0 0 #272626af inset,
97		-0.1em 0 0 #272626 inset,
98		0 0.1em 0 #847a62 inset,
99		0 -0.1em 0 #ffffff3f,
100		0 0.1em 0 #ffffff7f,
101		0 -0.1em 0 #722257 inset,
102		-0.1em -0.2em 0 #ffffff7f inset;
103}
104
105.input:checked + .span {
106  opacity: 1;
107  color: red
108}
109
110.input:focus {
111  outline: transparent;
112}
113
114.input + .span {
115  opacity: 0.65;
116  transition: opacity var(--transDur) ease-in-out;
117}
118
119/* Dark mode */
120@media (prefers-color-scheme: dark) {
121  :root {
122    --bg: #5c6270;
123    --fg: #e3e4e8;
124  }
125
126  .label:first-child .input {
127    box-shadow: 0.1em 0 0 #2726267f inset,
128			-0.1em 0 0 #27262600 inset,
129			0 0.1em 0 #afa490 inset,
130			0 -0.1em 0 #0000001f,
131			0 0.2em 0.5em #0000007f,
132			0 -0.1em 0 #926086 inset,
133			-0.1em -0.2em 0 #ffffff7f inset,
134			0.2em 0 0 #ffffff7f inset;
135  }
136
137  .label:last-child .input {
138    box-shadow: 0 -0.1em 0 #926086 inset,
139			0.1em 0 0 #2726267f inset,
140			-0.1em 0 0 #2726267f inset,
141			0 0.1em 0 #afa490 inset,
142			-0.1em 0 0 #afa490 inset,
143			0 -0.1em 0 #0000001f,
144			0 0.2em 0.5em #0000007f,
145			-0.1em -0.1em 0 0.1em #ffffff7f inset;
146  }
147
148  .label:first-child .input:checked {
149    box-shadow: 0.1em 0 0 #272626af inset,
150			-0.1em 0 0 #272626 inset,
151			0 0.1em 0 #847a62 inset,
152			0 -0.1em 0 #0000007f,
153			0 0.1em 0 #0000007f,
154			0 -0.1em 0 #722257 inset,
155			-0.1em -0.2em 0 #ffffff7f inset,
156			0.2em 0 0 #ffffff7f inset
157  }
158
159  .label:last-child .input:checked {
160    box-shadow: 0.1em 0 0 #272626af inset,
161			-0.1em 0 0 #272626 inset,
162			0 -0.1em 0 #722257 inset,
163			0 0.1em 0 #847a62 inset,
164			-0.1em 0 0 #847a62 inset,
165			0 -0.1em 0 #0000001f,
166			0 0.1em 0 #0000007f,
167			-0.1em -0.1em 0 0.1em #ffffff7f inset;
168  }
169
170  .input {
171    box-shadow: 0.1em 0 0 #2726267f inset,
172			-0.1em 0 0 #27262600 inset,
173			0 0.1em 0 #afa490 inset,
174			0 -0.1em 0 #0000001f,
175			0 0.2em 0.5em #0000007f,
176			0 -0.1em 0 #926086 inset,
177			-0.1em -0.2em 0 #ffffff7f inset;
178  }
179
180  .input:checked {
181    box-shadow: 0.1em 0 0 #272626af inset,
182			-0.1em 0 0 #272626af inset,
183			0 0.1em 0 #847a62 inset,
184			0 -0.1em 0 #0000007f,
185			0 0.1em 0 #0000007f,
186			0 -0.1em 0 #722257 inset,
187			-0.1em -0.2em 0 #ffffff7f inset;
188  }
189}

.form {
  display: flex;
}

.input {
  color: var(--fg);
  font: 1em/1.5 Helvetica, sans-serif;
}

.form, .label {
  width: 100%;
}

.form {
  margin: auto;
  max-width: 24em;
  padding: 0 1.5em;
}

.label {
  display: block;
  text-align: center;
  color: rgb(132, 248, 0);
  -webkit-tap-highlight-color: transparent;
}

.label:first-child .input {
  border-radius: 0.5em 0 0 0.5em;
  box-shadow: 0.1em 0 0 #2726267f inset,
		-0.1em 0 0 #27262600 inset,
		0 0.1em 0 #afa490 inset,
		0 -0.1em 0 #ffffff3f,
		0 0.2em 0.5em #0000007f,
		0 -0.1em 0 #926086 inset,
		-0.1em -0.2em 0 #ffffff7f inset,
		0.2em 0 0 #ffffff7f inset;
}

.label:last-child .input {
  border-radius: 0 0.5em 0.5em 0;
  box-shadow: 0 -0.1em 0 #926086 inset,
		0.1em 0 0 #2726267f inset,
		-0.1em 0 0 #2726267f inset,
		0 0.1em 0 #afa490 inset,
		-0.1em 0 0 #afa490 inset,
		0 -0.1em 0 #ffffff3f,
		0 0.2em 0.5em #0000007f,
		-0.1em -0.1em 0 0.1em #ffffff7f inset;
}

.label:first-child .input:checked {
  box-shadow: 0.1em 0 0 #272626af inset,
		-0.1em 0 0 #272626 inset,
		0 0.1em 0 #847a62 inset,
		0 -0.1em 0 #ffffff3f,
		0 0.1em 0 #ffffff7f,
		0 -0.1em 0 #722257 inset,
		-0.1em -0.2em 0 #ffffff7f inset,
		0.2em 0 0 #ffffff7f inset;
}

.label:last-child .input:checked {
  box-shadow: 0.1em 0 0 #272626af inset,
		-0.1em 0 0 #272626 inset,
		0 -0.1em 0 #722257 inset,
		0 0.1em 0 #847a62 inset,
		-0.1em 0 0 #847a62 inset,
		0 -0.1em 0 #ffffff3f,
		0 0.1em 0 #ffffff7f,
		-0.1em -0.1em 0 0.1em #ffffff7f inset;
}

.input {
  background-image: linear-gradient(#ffffff 33%,#414751 58%,#837b52,#c5baa1,#c3adaa);
  border-radius: 0;
  box-shadow: 0.1em 0 0 #2726267f inset,
		-0.1em 0 0 #27262600 inset,
		0 0.1em 0 #afa490 inset,
		0 -0.1em 0 #ffffff3f,
		0 0.2em 0.5em #0000007f,
		0 -0.1em 0 #926086 inset,
		-0.1em -0.2em 0 #ffffff7f inset;
  cursor: pointer;
  display: block;
  margin-bottom: 0.5em;
  width: 100%;
  height: 1em;
  transition: box-shadow var(--transDur) ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.input:checked {
  background-image: linear-gradient(#ffffff 33%,#414751 58%,#827a7b,#c0b6ac,#c3adaa);
  box-shadow: 0.1em 0 0 #272626af inset,
		-0.1em 0 0 #272626 inset,
		0 0.1em 0 #847a62 inset,
		0 -0.1em 0 #ffffff3f,
		0 0.1em 0 #ffffff7f,
		0 -0.1em 0 #722257 inset,
		-0.1em -0.2em 0 #ffffff7f inset;
}

.input:checked + .span {
  opacity: 1;
  color: red
}

.input:focus {
  outline: transparent;
}

.input + .span {
  opacity: 0.65;
  transition: opacity var(--transDur) ease-in-out;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #5c6270;
    --fg: #e3e4e8;
  }

  .label:first-child .input {
    box-shadow: 0.1em 0 0 #2726267f inset,
			-0.1em 0 0 #27262600 inset,
			0 0.1em 0 #afa490 inset,
			0 -0.1em 0 #0000001f,
			0 0.2em 0.5em #0000007f,
			0 -0.1em 0 #926086 inset,
			-0.1em -0.2em 0 #ffffff7f inset,
			0.2em 0 0 #ffffff7f inset;
  }

  .label:last-child .input {
    box-shadow: 0 -0.1em 0 #926086 inset,
			0.1em 0 0 #2726267f inset,
			-0.1em 0 0 #2726267f inset,
			0 0.1em 0 #afa490 inset,
			-0.1em 0 0 #afa490 inset,
			0 -0.1em 0 #0000001f,
			0 0.2em 0.5em #0000007f,
			-0.1em -0.1em 0 0.1em #ffffff7f inset;
  }

  .label:first-child .input:checked {
    box-shadow: 0.1em 0 0 #272626af inset,
			-0.1em 0 0 #272626 inset,
			0 0.1em 0 #847a62 inset,
			0 -0.1em 0 #0000007f,
			0 0.1em 0 #0000007f,
			0 -0.1em 0 #722257 inset,
			-0.1em -0.2em 0 #ffffff7f inset,
			0.2em 0 0 #ffffff7f inset
  }

  .label:last-child .input:checked {
    box-shadow: 0.1em 0 0 #272626af inset,
			-0.1em 0 0 #272626 inset,
			0 -0.1em 0 #722257 inset,
			0 0.1em 0 #847a62 inset,
			-0.1em 0 0 #847a62 inset,
			0 -0.1em 0 #0000001f,
			0 0.1em 0 #0000007f,
			-0.1em -0.1em 0 0.1em #ffffff7f inset;
  }

  .input {
    box-shadow: 0.1em 0 0 #2726267f inset,
			-0.1em 0 0 #27262600 inset,
			0 0.1em 0 #afa490 inset,
			0 -0.1em 0 #0000001f,
			0 0.2em 0.5em #0000007f,
			0 -0.1em 0 #926086 inset,
			-0.1em -0.2em 0 #ffffff7f inset;
  }

  .input:checked {
    box-shadow: 0.1em 0 0 #272626af inset,
			-0.1em 0 0 #272626af inset,
			0 0.1em 0 #847a62 inset,
			0 -0.1em 0 #0000007f,
			0 0.1em 0 #0000007f,
			0 -0.1em 0 #722257 inset,
			-0.1em -0.2em 0 #ffffff7f inset;
  }
}

Toggle prefixes

3.3K views

Copy to Figma

3.3K views

Comments

No variations yet

MIT License

Copyright - 2024 Pradeepsaranbishnoi (Pradeep Saran) 

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.