Radio button group

<div class="container">
<!-- Each radio item -->
<label class="container__label">
<!-- The radio input -->
<input type="radio" class="container__input" />
<!-- The text -->
...
</label>
<!-- Repeat other items -->
...
</div>
.container {
display: flex;
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
height: 32px;
}
.container__label {
/* Center the content */
align-items: center;
display: inline-flex;
border-right: 1px solid rgba(0, 0, 0, 0.3);
padding: 8px;
/* For not selected radio */
background-color: transparent;
color: #ccc;
}
.container__label:last-child {
/* Remove the right border from the last label */
border-right-color: transparent;
}
.container__label--selected {
/* For selected radio */
background-color: #00449e;
color: #fff;
}
.container__input {
/* Hide it */
display: none;
}

See also

Custom checkbox button

Custom radio button