Radio by SupportHotline

1.input {
2  -webkit-appearance: none;
3  /* remove default */
4  margin: 6px;
5  width: 24px;
6  height: 24px;
7  border-radius: 12px;
8  cursor: pointer;
9  vertical-align: middle;
10  box-shadow: hsla(0, 0%, 100%, 0.15) 0 1px 1px,
11    inset hsla(0, 0%, 0%, 0.5) 0 0 0 1px;
12  background-color: hsla(0, 0%, 0%, 0.2);
13  background-repeat: no-repeat;
14  -webkit-transition: background-position 0.15s cubic-bezier(0.8, 0, 1, 1),
15    -webkit-transform 0.25s cubic-bezier(0.8, 0, 1, 1);
16  outline: none;
17}
18
19.input.green {
20  background-image: -webkit-radial-gradient(
21    hsla(118, 100%, 90%, 1) 0%,
22    hsla(118, 100%, 70%, 1) 15%,
23    hsla(118, 100%, 60%, 0.3) 28%,
24    hsla(118, 100%, 30%, 0) 70%
25  );
26}
27
28.input.yellow {
29  background-image: -webkit-radial-gradient(
30    hsla(50, 100%, 90%, 1) 0%,
31    hsla(50, 100%, 70%, 1) 15%,
32    hsla(50, 100%, 60%, 0.3) 28%,
33    hsla(50, 100%, 30%, 0) 70%
34  );
35}
36
37.input.red {
38  background-image: -webkit-radial-gradient(
39    hsla(0, 100%, 90%, 1) 0%,
40    hsla(0, 100%, 70%, 1) 15%,
41    hsla(0, 100%, 60%, 0.3) 28%,
42    hsla(0, 100%, 30%, 0) 70%
43  );
44}
45
46.input:checked {
47  -webkit-transition: background-position 0.2s 0.15s cubic-bezier(0, 0, 0.2, 1),
48    -webkit-transform 0.25s cubic-bezier(0, 0, 0.2, 1);
49}
50
51.input:active {
52  -webkit-transform: scale(1.5);
53  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0, 0, 0.2, 1);
54}
55
56/* The up/down direction logic */
57
58.input,
59.input:active {
60  background-position: 24px 0;
61}
62
63.input:checked {
64  background-position: 0 0;
65}
66
67.input:checked ~ .input,
68.input:checked ~ .input:active {
69  background-position: -24px 0;
70}
71