← All elements
<div class="cd"><input type="radio" name="c" id="c1" checked style="--c:#ef4444"><label for="c1" style="--c:#ef4444"></label><input type="radio" name="c" id="c2" style="--c:#f59e0b"><label for="c2" style="--c:#f59e0b"></label><input type="radio" name="c" id="c3" style="--c:#10b981"><label for="c3" style="--c:#10b981"></label><input type="radio" name="c" id="c4" style="--c:#6366f1"><label for="c4" style="--c:#6366f1"></label></div>About this button
Round colour swatches where the chosen one gains a ring and a tick, built on radio inputs.
How it works
Each swatch is a label for a hidden radio and takes its colour from a custom property. The checked one gets a double ring using two box-shadows and a tick drawn with two borders.
Ways to customise it
- Add more swatches.
- Change the colours.
- Make the swatches square.
Good to know
Colour swatches need text names for assistive technology, so add visible labels or aria-labels. A tick marks the selection, so colour is not the only cue.
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.