Radio by JkHuger

1.rating {
2  cursor: pointer;
3}
4
5.card {
6  display: -webkit-box;
7  display: -ms-flexbox;
8  display: flex;
9  margin: auto;
10  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 16, 0.19), 0 0.3rem 0.3rem rgba(0, 0, 16, 0.23);
11  box-shadow: 0 0.5rem 1rem rgba(0, 0, 16, 0.19), 0 0.3rem 0.3rem rgba(0, 0, 16, 0.23);
12  background-color: rgb(255, 255, 255);
13  padding: 0.8rem;
14  width: 33rem;
15}
16
17.rating-container {
18  display: -webkit-box;
19  display: -ms-flexbox;
20  display: flex;
21  -webkit-box-pack: justify;
22  -ms-flex-pack: justify;
23  justify-content: space-between;
24  padding: 0.4rem 0.8rem;
25  width: 100%;
26}
27
28.rating {
29  background-color: rgba(0, 0, 16, 0.8);
30  padding: 0.4rem 0.4rem 0.1rem 0.4rem;
31  border-radius: 2.2rem;
32}
33
34.rating-form {
35  display: flex;
36  flex-wrap: wrap;
37  justify-content: center;
38}
39
40.svg {
41  fill: rgb(242, 242, 242);
42  height: 3.6rem;
43  width: 3.6rem;
44  margin: 0.2rem;
45  align-items: center;
46  justify-content: center;
47  cursor: pointer;
48}
49
50.rating-form-2 svg {
51  height: 3rem;
52  width: 3rem;
53  margin: 0.5rem;
54}
55
56#radios label {
57  position: relative;
58}
59
60.super-happy, [type="radio"] {
61  position: absolute;
62  opacity: 0;
63}
64
65.input ,[type="radio"] + svg {
66  -webkit-transition: all 0.2s;
67  transition: all 0.2s;
68}
69
70.super-happy[class="super-happy"]:hover + svg,
71.super-happy[class="super-happy"]:checked + svg,
72.super-happy[class="super-happy"]:focus + svg {
73  fill: rgb(0, 204, 79);
74  transition: 1.5s;
75}
76
77.neutral[class="neutral"]:hover + svg,
78.neutral[class="neutral"]:checked + svg,
79.neutral[class="neutral"]:focus + svg {
80  fill: rgb(232, 214, 0);
81  transition: 1.5s;
82}
83
84.super-sad[class="super-sad"]:hover + svg,
85.super-sad[class="super-sad"]:checked + svg,
86.super-sad[class="super-sad"]:focus + svg {
87  fill: rgb(239, 42, 16);
88  transition: 1.5s;
89}
90
91
92