Radio by Pradeepsaranbishnoi

1.tabs {
2  display: flex;
3  position: relative;
4  background-color: #fff;
5  box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15);
6  padding: 0.75rem;
7  border-radius: 99px;
8}
9
10.tabs * {
11  z-index: 2;
12}
13
14.container input[type="radio"] {
15  display: none;
16}
17
18.tab {
19  display: flex;
20  align-items: center;
21  justify-content: center;
22  height: 30px;
23  width: 50px;
24  font-size: .8rem;
25  color: black;
26  font-weight: 500;
27  border-radius: 99px;
28  cursor: pointer;
29  transition: color 0.15s ease-in;
30}
31
32.notification {
33  display: flex;
34  align-items: center;
35  justify-content: center;
36  width: .8rem;
37  height: .8rem;
38  position: absolute;
39  top: 10px;
40  left: 30%;
41  font-size: 10px;
42  margin-left: 0.75rem;
43  border-radius: 50%;
44  margin: 0px;
45  background-color: #e6eef9;
46  transition: 0.15s ease-in;
47}
48
49.container input[type="radio"]:checked + label {
50  color: #185ee0;
51}
52
53.container input[type="radio"]:checked + label > .notification {
54  background-color: #185ee0;
55  color: #fff;
56  margin: 0px;
57}
58
59.container input[id="radio-1"]:checked ~ .glider {
60  transform: translateX(0);
61}
62
63.container input[id="radio-2"]:checked ~ .glider {
64  transform: translateX(100%);
65}
66
67.container input[id="radio-3"]:checked ~ .glider {
68  transform: translateX(200%);
69}
70
71.glider {
72  position: absolute;
73  display: flex;
74  height: 30px;
75  width: 50px;
76  background-color: #e6eef9;
77  z-index: 1;
78  border-radius: 99px;
79  transition: 0.25s ease-out;
80}
81
82@media (max-width: 700px) {
83 
84  .tabs {
85    transform: scale(0.6);
86  }
87}
88