← All elements
<div class="sw"><label><input type="radio" name="c" checked><i style="background:#ef4444"></i></label><label><input type="radio" name="c"><i style="background:#f59e0b"></i></label><label><input type="radio" name="c"><i style="background:#10b981"></i></label><label><input type="radio" name="c"><i style="background:#3b82f6"></i></label><label><input type="radio" name="c"><i style="background:#8b5cf6"></i></label></div>About this button
A set of round colour choices where each radio shows a ring around the picked swatch with :checked and box-shadow.
How it works
Each swatch is a label holding a hidden radio and a coloured circle. The checked swatch gets a double box-shadow ring, first white, then dark, which looks like an outline offset from the circle. Hover scales the circle slightly, and the focus-visible state adds an outline for keyboard users.
Ways to customise it
- Change the inline background colours of the circles.
- Edit the two ring colours in the :checked rule.
- Increase the circle width and height for larger swatches.
Good to know
Colour alone should not carry the choice, so add text names or aria labels in a real product. The radio group keeps one swatch selected and supports arrow keys.
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.