Haberdashery button card

Wood, mother of pearl, brass and horn buttons on a shop card: pick one and a thread stitches it on crosswise.

Settings

Main color#c0392b

Secondary color#efe4cc

Size16px

Speed1x

Text

Code

index.html

<fieldset class="uvq04-btc"><legend>Button for the shirt</legend><div class="cd"><p class="hd" aria-hidden="true">Haberdashery · 18 mm</p><div class="gr"><label><input type="radio" name="uvq04-btc"><span class="bt wd" aria-hidden="true"><svg viewBox="0 0 24 24"><g class="ho"><circle cx="9.3" cy="9.3" r="1.5"/><circle cx="14.7" cy="9.3" r="1.5"/><circle cx="9.3" cy="14.7" r="1.5"/><circle cx="14.7" cy="14.7" r="1.5"/></g><g class="sw"><path pathLength="1" d="M9.3 9.3L14.7 14.7"/><path class="s2" pathLength="1" d="M14.7 9.3L9.3 14.7"/></g></svg></span><span class="nm">Wood</span></label><label><input type="radio" name="uvq04-btc" checked><span class="bt pl" aria-hidden="true"><svg viewBox="0 0 24 24"><g class="ho"><circle cx="9" cy="12" r="1.6"/><circle cx="15" cy="12" r="1.6"/></g><g class="sw"><path pathLength="1" d="M9 12H15"/><path class="s2" pathLength="1" d="M9 12.6H15"/></g></svg></span><span class="nm">Pearl</span></label><label><input type="radio" name="uvq04-btc"><span class="bt br" aria-hidden="true"><svg viewBox="0 0 24 24"><g class="ho"><circle cx="9.3" cy="9.3" r="1.5"/><circle cx="14.7" cy="9.3" r="1.5"/><circle cx="9.3" cy="14.7" r="1.5"/><circle cx="14.7" cy="14.7" r="1.5"/></g><g class="sw"><path pathLength="1" d="M9.3 9.3L14.7 14.7"/><path class="s2" pathLength="1" d="M14.7 9.3L9.3 14.7"/></g></svg></span><span class="nm">Brass</span></label><label><input type="radio" name="uvq04-btc"><span class="bt hn" aria-hidden="true"><svg viewBox="0 0 24 24"><g class="ho"><circle cx="9" cy="12" r="1.6"/><circle cx="15" cy="12" r="1.6"/></g><g class="sw"><path pathLength="1" d="M9 12H15"/><path class="s2" pathLength="1" d="M9 12.6H15"/></g></svg></span><span class="nm">Horn</span></label></div></div></fieldset>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

Markdown version with all the code, for AI assistants

More in Radio buttons

See all Radio buttons

Bouncing dot radio

Radio buttonsHTML + CSS

Drawn ring radio

Radio buttonsHTML + CSS

Sliding pill selector

Radio buttonsHTML + CSS

Radio cards with icons

Radio buttonsHTML + CSS

Jumping dot radio

Radio buttonsHTML + CSS

Liquid fill radio

Radio buttonsHTML + CSS

Vertical tabs with light bar

Radio buttonsHTML + CSS

Pricing plan selector

Radio buttonsHTML + CSS

Where to use it

Four sewing buttons sit on a cream haberdashery card with a dashed border, each drawn in CSS: grained wood, iridescent mother of pearl, polished brass and dark horn. Choosing one lifts and tilts it, and red thread stitches through its holes in a cross with SVG strokes. It fits clothing configurators, tailoring shops and craft stores.

The main color is the thread and the secondary color is the card. Two or four holes come from small SVG groups, so you can add a fifth button or change the materials while keeping the same stitching animation.