← All elements
<div class="sz"><input type="radio" name="z" id="z1"><label for="z1">S</label><input type="radio" name="z" id="z2" checked><label for="z2">M</label><input type="radio" name="z" id="z3"><label for="z3">L</label><input type="radio" name="z" id="z4" disabled><label for="z4">XL</label></div>About this button
Size choices shown as square tiles; the picked one inverts and lifts, with an unavailable size struck through.
How it works
Four radios become square size tiles. The checked tile inverts to dark and lifts, hover darkens the outline, and a disabled option gets a diagonal pattern with lighter text.
Ways to customise it
- Change the sizes.
- Make another tile disabled.
- Change the dark colour.
Good to know
Disabled radios are skipped by the keyboard and clearly shown. Do not rely only on colour for the unavailable state, as the pattern also helps.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.