Radio by it12uw

1.radio {
2  background: #454857;
3  padding: 4px;
4  border-radius: 3px;
5  box-shadow: inset 0 0 0 3px rgba(35, 33, 45, 0.3),
6    0 0 0 3px rgba(185, 185, 185, 0.3);
7  position: relative;
8}
9
10.radio input {
11  width: auto;
12  height: 100%;
13  -webkit-appearance: none;
14  -moz-appearance: none;
15  appearance: none;
16  outline: none;
17  cursor: pointer;
18  border-radius: 2px;
19  padding: 4px 8px;
20  background: #454857;
21  color: #bdbdbdbd;
22  font-size: 14px;
23  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
24    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
25    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
26  transition: all 100ms linear;
27}
28
29.radio input:checked {
30  background-image: linear-gradient(180deg, #95d891, #74bbad);
31  color: #fff;
32  box-shadow: 0 1px 1px #0000002e;
33  text-shadow: 0 1px 0px #79485f7a;
34  -webkit-animation: rubberBand 1s both;
35  animation: rubberBand 1s both;
36}
37
38.radio input:before {
39  content: attr(label);
40  display: inline-block;
41  text-align: center;
42  width: 100%;
43}
44
45@-webkit-keyframes rubberBand {
46  0% {
47    -webkit-transform: scale3d(1, 1, 1);
48    transform: scale3d(1, 1, 1);
49  }
50
51  30% {
52    -webkit-transform: scale3d(1.25, 0.75, 1);
53    transform: scale3d(1.25, 0.75, 1);
54  }
55
56  40% {
57    -webkit-transform: scale3d(0.75, 1.25, 1);
58    transform: scale3d(0.75, 1.25, 1);
59  }
60
61  50% {
62    -webkit-transform: scale3d(1.15, 0.85, 1);
63    transform: scale3d(1.15, 0.85, 1);
64  }
65
66  65% {
67    -webkit-transform: scale3d(0.95, 1.05, 1);
68    transform: scale3d(0.95, 1.05, 1);
69  }
70
71  75% {
72    -webkit-transform: scale3d(1.05, 0.95, 1);
73    transform: scale3d(1.05, 0.95, 1);
74  }
75
76  100% {
77    -webkit-transform: scale3d(1, 1, 1);
78    transform: scale3d(1, 1, 1);
79  }
80}
81
82@keyframes rubberBand {
83  0% {
84    -webkit-transform: scale3d(1, 1, 1);
85    transform: scale3d(1, 1, 1);
86  }
87
88  30% {
89    -webkit-transform: scale3d(1.25, 0.75, 1);
90    transform: scale3d(1.25, 0.75, 1);
91  }
92
93  40% {
94    -webkit-transform: scale3d(0.75, 1.25, 1);
95    transform: scale3d(0.75, 1.25, 1);
96  }
97
98  50% {
99    -webkit-transform: scale3d(1.15, 0.85, 1);
100    transform: scale3d(1.15, 0.85, 1);
101  }
102
103  65% {
104    -webkit-transform: scale3d(0.95, 1.05, 1);
105    transform: scale3d(0.95, 1.05, 1);
106  }
107
108  75% {
109    -webkit-transform: scale3d(1.05, 0.95, 1);
110    transform: scale3d(1.05, 0.95, 1);
111  }
112
113  100% {
114    -webkit-transform: scale3d(1, 1, 1);
115    transform: scale3d(1, 1, 1);
116  }
117}
118