Radio by 3bdel3ziz-T

1.container {
2  --col-gray: #3f3f3f;
3  --col-white: #fff;
4  --col-like: #2196f3;
5  --col-dislike: #ff3232;
6  --transition: 350ms;
7  background-color: var(--col-gray);
8  width: 130px;
9  border-radius: 50px;
10  display: flex;
11  justify-content: space-between;
12  align-items: center;
13  padding: 9px;
14  user-select: none;
15  /*you can easlly change the number by using this variabels*/
16  --zero: translateY(calc(50% - 11px));
17  --one: translateY(calc(40% - 11px));
18  --two: translateY(calc(30% - 11px));
19  --three: translateY(calc(20% - 11px));
20  --four: translateY(calc(10% - 11px));
21  --five: translateY(calc(0% - 11px));
22  --six: translateY(calc(-10% - 11px));
23  --seven: translateY(calc(-20% - 11px));
24  --eight: translateY(calc(-30% - 11px));
25  --nine: translateY(calc(-40% - 11px));
26  --ten: translateY(calc(-50% - 11px));
27}
28.container:has(#like:checked) .count {
29  border-left-color: var(--col-like);
30  border-right-color: transparent;
31}
32.container:has(#like:checked) .count .number:first-child {
33  /*change first number from here*/
34  /*when click on like*/
35  transform: var(--nine);
36}
37.container:has(#like:checked) .count .number:nth-child(2) {
38  /*change second number from here*/
39  /*when click on like*/
40  transform: var(--five);
41}
42.container:has(#like:checked) .count .number:last-child {
43  /*change third number from here*/
44  /*when click on like*/
45  transform: var(--three);
46}
47.container:has(#dislike:checked) > .count {
48  border-right-color: var(--col-dislike);
49  border-left-color: transparent;
50}
51.container:has(#dislike:checked) > .count .number:first-child {
52  /*change first number from here*/
53  /*when click on dislike*/
54  transform: var(--zero);
55}
56.container:has(#dislike:checked) > .count .number:nth-child(2) {
57  /*change second number from here*/
58  /*when click on dislike*/
59  transform: var(--zero);
60}
61.container:has(#dislike:checked) > .count .number:last-child {
62  /*change third number from here*/
63  /*when click on dislike*/
64  transform: var(--nine);
65}
66.container label input {
67  display: none;
68}
69.container #like:checked + svg {
70  animation: evaluation-animation var(--transition) ease-in-out 0s 1 normal both;
71  fill: var(--col-like);
72}
73.container #dislike:checked + svg {
74  animation: evaluation-animation var(--transition) ease-in-out 0s 1 normal both;
75  fill: var(--col-dislike);
76}
77.container .icon {
78  cursor: pointer;
79  fill: var(--col-white);
80  height: 24px;
81  width: 24px;
82  display: flex;
83  align-items: center;
84  justify-content: center;
85}
86.container .icon.like {
87  margin-left: 9px;
88}
89.container .icon.dislike {
90  margin-right: 9px;
91}
92.container .count {
93  transition: var(--transition);
94  flex: 1;
95  border-left: 1px solid var(--col-white);
96  border-right: 1px solid var(--col-white);
97  position: relative;
98  height: 24px;
99  overflow: hidden;
100  margin: auto;
101  color: white;
102  font-size: 16px;
103  font-family: sans-serif;
104  display: flex;
105  align-items: center;
106
107  justify-content: center;
108  gap: 0.5px;
109  flex-direction: row;
110}
111.container .count .number {
112  display: flex;
113  flex-direction: column;
114  transform: translateY(calc(50% - 8px));
115  transition: 1000ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
116}
117.container .count .number:first-child {
118  transition-delay: 200ms;
119}
120.container .count .number:nth-child(2) {
121  transition-delay: 150ms;
122}
123.container .count .number:last-child {
124  transition-delay: 50ms;
125}
126
127@keyframes evaluation-animation {
128  0%,
129  100% {
130    transform: scale(1) rotate(0deg);
131  }
132  50% {
133    transform: scale(1.1) rotate(-10deg);
134  }
135}
136