HTML + CSSCheckboxes
Heart like button
An outlined heart that fills with red and bounces when you tap it, the classic “like” gesture.
Settings
16px
1x
Code
<label class="uv-ch"><input type="checkbox"><svg viewBox="0 0 24 24"><path d="M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.8 4.5c2.1 0 3.6 1.2 5.2 3 1.6-1.8 3.1-3 5.2-3 3.8 0 5.9 3.9 4.4 7.3C19.5 16.4 12 21 12 21z"/></svg>Like</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
Where to use it
This heart checkbox is the universal “like” or “save for later”. Put it on the product cards of an online shop as a wishlist button, next to recipes on a food blog or on the photos of a travel gallery. The outline fills in red with a quick bounce, the same gesture people know from every social app.
It only remembers the state on the page itself; to keep favorites between visits you need to save them on your side. The label is optional, so you can drop the text and use the heart alone in the corner of a card.