<fieldset class="crb-seg">
  <legend class="crb-sr">View</legend>
  <input type="radio" name="crb-seg" id="crb-seg-1" checked />
  <label for="crb-seg-1">Day</label>
  <input type="radio" name="crb-seg" id="crb-seg-2" />
  <label for="crb-seg-2">Week</label>
  <input type="radio" name="crb-seg" id="crb-seg-3" />
  <label for="crb-seg-3">Month</label>
  <input type="radio" name="crb-seg" id="crb-seg-4" />
  <label for="crb-seg-4">Year</label>
  <span class="crb-seg-thumb"></span>
</fieldset>

.crb-seg {
  display: inline-flex; position: relative;
  padding: 3px; background: #0c0c12;
  border: 1px solid rgba(255,255,255,0.06); border-radius: 8px;
}
.crb-seg input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-seg label {
  flex: 1 1 0; min-width: 64px;
  position: relative; z-index: 1;
  padding: 7px 14px;
  font: 600 12px/1 system-ui, sans-serif; color: #b8b6d4;
  text-align: center;
  cursor: pointer; transition: color 0.25s;
  border-radius: 6px;
}
.crb-seg input:checked + label { color: #fff; }
.crb-seg-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc(25% - 1.5px);
  background: #1f1f2e; border: 1px solid rgba(124,108,255,0.4);
  border-radius: 6px; z-index: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  transition: transform 0.35s cubic-bezier(0.65,0,0.35,1);
}
#crb-seg-2:checked ~ .crb-seg-thumb { transform: translateX(100%); }
#crb-seg-3:checked ~ .crb-seg-thumb { transform: translateX(200%); }
#crb-seg-4:checked ~ .crb-seg-thumb { transform: translateX(300%); }

.crb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}