Segmented Pill Radio Bar

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="r-pill-bar"><label><input type="radio" name="r4" checked /><span>Day</span></label><label><input type="radio" name="r4" /><span>Night</span></label></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.r-pill-bar { display: inline-flex; background: #18181b; padding: 3px; border-radius: 20px; border: 1px solid #27272a; font-family: system-ui; }
.r-pill-bar input { display: none; }
.r-pill-bar span { padding: 4px 12px; font-size: 11px; color: #a1a1aa; border-radius: 16px; cursor: pointer; transition: 0.2s; }
.r-pill-bar input:checked + span { background: #3b82f6; color: #fff; }