HTML + CSSCheckboxes
Cross to check morph
The two bars of a red cross slide and resize into a green check when the box is ticked.
Settings
16px
1x
Code
<label class="uv-cxm"><input type="checkbox"><span class="bx"><i class="a"></i><i class="b"></i></span>I’ll attend the event</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.
More in Checkboxes
See all CheckboxesWhere to use it
A checkbox that shows both answers at once works well for yes or no questions such as attending an event, accepting an invite or marking an item as available. Unchecked, the box shows a soft red cross; checked, the same two bars move, shrink and rotate into a tick while the tile fills with green.
Both colors are editable, so you can swap to brand tones or to neutral grey and blue. The movement uses one springy transition per bar, which keeps the morph smooth in both directions without any keyframes.