HTML + CSSCheckboxes
Corazón de me gusta
Un corazón de contorno que se rellena de rojo con un bote al tocarlo, el gesto de «me gusta» de siempre.
Ajustes
16px
1x
Código
<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>Me gusta</label>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Checkboxes
Dónde usarlo
Este corazón es el «me gusta» o el «guardar para luego» universal. Ponlo en las fichas de producto de una tienda online como botón de lista de deseos, junto a las recetas de un blog de cocina o sobre las fotos de una galería de viajes. El contorno se llena de rojo con un rebote, como en cualquier red social.
Solo recuerda el estado mientras estás en la página; para guardar favoritos entre visitas tendrás que almacenarlos por tu cuenta. El texto es opcional: puedes quitarlo y dejar el corazón solo en la esquina de una tarjeta.