<input type="radio">要素のデフォルトの表示をclip:rect(0, 0, 0, 0)を使って消し、input要素に対応したrabelに対してボタン風表現を適用しています。
チェックに青色を使ったボタンは、全体を一体化し、左右の角を丸めています。また紫色を使ったボタンは、それぞれ離し全ての角を丸めています。htmlに変更は無く、cssだけ少し変えています。
標準のラジオボタン（比較用）
パクチーは好き？
お天気予想
営業所選択
/* 「お天気予想」部分のhtml */
<div class="multi-way-choice">
<input type="radio" id="radio-1" name="switch-1" value="晴天" />
<label for="radio-1">晴天</label>
<input type="radio" id="radio-2" name="switch-1" value="曇天" />
<label for="radio-2">曇天</label>
<input type="radio" id="radio-3" name="switch-1" value="雨天" checked/>
<label for="radio-3">雨天</label>
</div>
/* CSS */
.multi-way-choice {
display: flex;
margin-bottom: 26px;
overflow: hidden;
}
.multi-way-choice input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.multi-way-choice label {
background-color: #f0f0f0;
color: #999;
text-align: center;
font-size: 17px;
line-height: 1;
padding: 9px 18px;
margin-right: -1px;
border: 1px solid rgba(0, 0, 0, 0.4);
transition: all 0.2s ease-in;
}
.multi-way-choice:hover {
cursor: pointer;
}
.multi-way-choice input:checked + label {
background-color: #6af;
color:#222;
}
.multi-way-choice label:first-of-type {
border-radius: 5px 0 0 5px;
}
.multi-way-choice label:last-of-type {
border-radius: 0 5px 5px 0;
}
パクチーは好き？
お天気予想
営業所選択
/* cssの変更部分 */
.multi-way-choice2 label {
margin-right: 12px;
border-radius: 3px;
}
.multi-way-choice2 input:checked + label {
background-color: #baf;
color: #111;
}