1 
 2<div class="di-radio-wrap">
 3  <input
 4    type="radio"
 5    name="di-radio"
 6    id="r1"
 7    class="di-radio-input"
 8    checked=""
 9  />
10  <input type="radio" name="di-radio" id="r2" class="di-radio-input" />
11  <input type="radio" name="di-radio" id="r3" class="di-radio-input" />
12 
13  <div class="di-radio-island">
14    <label for="r1" class="di-radio-btn">Day</label>
15    <label for="r2" class="di-radio-btn">Week</label>
16    <label for="r3" class="di-radio-btn">Month</label>
17    <div class="di-radio-indicator"></div>
18  </div>
19</div>          

 1 
 2.di-radio-wrap {
 3  width: 340px;
 4  margin: 120px auto;
 5  display: flex;
 6  justify-content: center;
 7  position: relative;
 8}
 9 
10.di-radio-input {
11  display: none;
12}
13 
14.di-radio-island {
15  background: #000;
16  border-radius: 999px;
17  padding: 6px;
18  display: flex;
19  position: relative;
20  gap: 4px;
21}
22 
23.di-radio-btn {
24  color: #aaa;
25  font-size: 14px;
26  padding: 10px 18px;
27  border-radius: 999px;
28  cursor: pointer;
29  position: relative;
30  z-index: 2;
31  transition: all 0.3s ease;
32}
33 
34.di-radio-indicator {
35  position: absolute;
36  top: 6px;
37  left: 6px;
38  width: 64px;
39  height: calc(100% - 12px);
40  background: #222;
41  border-radius: 999px;
42  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
43}
44 
45#r1:checked ~ .di-radio-island .di-radio-indicator {
46  transform: translateX(0);
47}
48 
49#r2:checked ~ .di-radio-island .di-radio-indicator {
50  transform: translateX(72px);
51}
52 
53#r3:checked ~ .di-radio-island .di-radio-indicator {
54  transform: translateX(152px);
55}
56 
57#r1:checked ~ .di-radio-island label[for="r1"],
58#r2:checked ~ .di-radio-island label[for="r2"],
59#r3:checked ~ .di-radio-island label[for="r3"] {
60  color: #fff;
61  transform: translateY(-1px);
62}
63 
64.di-radio-btn:active {
65  transform: scale(0.92);
66}