1.radio-input {
2  position: relative;
3  display: flex;
4  flex-direction: column;
5  margin: 10px;
6  width: 150px;
7  height: 50px;
8  cursor: pointer;
9}
10
11.radio-input .input {
12  position: absolute;
13  height: 100%;
14  width: 100%;
15  margin: 0;
16  cursor: pointer;
17  z-index: 10;
18  opacity: 0;
19}
20
21.radio-input .span {
22  position: relative;
23  display: block;
24  width: 100%;
25  height: 100%;
26  background: #323232;
27  border-radius: 10px;
28}
29
30.radio-input .span::before {
31  content: 'Inactive';
32  position: absolute;
33  top: 3px;
34  left: 3px;
35  width: calc(100% - 6px);
36  height: calc(100% - 6px);
37  border-radius: 8px;
38  background: #666666;
39  box-shadow: inset -6px -6px 12px #2c2c2c,
40              inset 6px 6px 12px #a0a0a0;
41  color: #323232;
42  font-weight: 700;
43  font-size: 17px;
44  display: flex;
45  justify-content: center;
46  align-items: center;
47}
48
49.input:checked ~ .span::before {
50  content: 'Active';
51  color: #ccc;
52  text-shadow: 1px 1px 0.5px rgba(0,255,0,0.3);
53  ;
54  border-radius: 8px;
55  background: #666666;
56  box-shadow: inset 6px 6px 12px #2c2c2c,
57              inset -6px -6px 12px #a0a0a0;
58}
59
60.radio-input .span::after {
61  content: '';
62  height: 6px;
63  width: 6px;
64  border-radius: 100%;
65  background-color: red;
66  position: absolute;
67  top: calc(50% - 3px);
68  right: 20px;
69  box-shadow: 1px 1px 3px #9c0000,
70              -1px -1px 3px #ff0000;
71}
72
73.input:checked ~ .span::after {
74  background: #00ff00;
75  box-shadow: 1px 1px 3px #009c00,
76              -1px -1px 3px #00ff00;
77}