<nav class="segmented"> <input type="radio" name="seg-1" value="Organisation" id="seg-Organisation"> <label for="seg-Organisation">Organisation</label> <input type="radio" name="seg-1" value="Users" id="seg-Users"> <label for="seg-Users">Users</label> <input type="radio" name="seg-1" value="Units" id="seg-Units"> <label for="seg-Units">Units</label> <input type="radio" name="seg-1" value="Tags" id="seg-Tags"> <label for="seg-Tags">Tags</label> </nav>
.segmented { padding: 12px; } .segmented input[type=radio] { display: none; } .segmented label { border: outset 1px silver; padding: 2px 16px; margin-right: -5px; background: #ddd; cursor: pointer; } .segmented input:checked + label { border: inset 1px silver; background: #aaa; }