Retro toaster checkbox

While unchecked the slot glows as it toasts; checking pops both slices up golden with a springy jump.

Settings

Main color#d98a2b

Secondary color#9fd8cf

Size16px

Speed1x

Text

Code

index.html

<label class="uvq02-tst"><input type="checkbox"><span class="ts" aria-hidden="true"><i class="br a"></i><i class="br b"></i><span class="bd"><i class="lv"></i></span><i class="sm"></i><i class="sm"></i></span>Toasted bread</label>

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 Checkboxes

See all Checkboxes

Self-drawing checkbox

CheckboxesHTML + CSS

Round fill checkbox

CheckboxesHTML + CSS

Confetti burst checkbox

CheckboxesHTML + CSS

Strikethrough task item

CheckboxesHTML + CSS

3D flip checkbox

CheckboxesHTML + CSS

Heart like button

CheckboxesHTML + CSS

Bouncy drawn checkbox

CheckboxesHTML + CSS

Circle fill checkbox

CheckboxesHTML + CSS

Where to use it

This checkbox is a rounded retro toaster in a pastel colour, with a black slot, a side lever and little feet. While it is unchecked the slot glows orange as if the bread were toasting. Checking it raises the lever and pops both slices up with a springy jump, now golden with darker crusts, while two wisps of steam rise. It suits breakfast menus and recipe steps.

The main color is the toast and the secondary color the body of the toaster, so mint, butter yellow or chrome all work. The glow and steam loops stop under reduced motion, leaving a clear on and off state.