Estrella que gira al marcar

Una estrella de contorno que gira con un muelle y se llena de un brillo cálido al marcarla.

Ajustes

Color principal#ffb400

Color secundario#ffe795

Tamaño16px

Velocidad1x

Texto

Código

index.html

<label class="uv-cst"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.75 5.6 6.15.9-4.45 4.33 1.05 6.12L12 16.87l-5.5 2.88 1.05-6.12L3.1 9.3l6.15-.9z"/></svg></span>Destacar este proyecto</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

Ver todos: Checkboxes

Checkbox que se dibuja

CheckboxesHTML + CSS

Checkbox redonda

CheckboxesHTML + CSS

Checkbox con confeti

CheckboxesHTML + CSS

Tarea que se tacha

CheckboxesHTML + CSS

Checkbox que gira en 3D

CheckboxesHTML + CSS

Corazón de me gusta

CheckboxesHTML + CSS

Checkbox con trazo y rebote

CheckboxesHTML + CSS

Checkbox con relleno circular

CheckboxesHTML + CSS

Dónde usarlo

Úsala donde la gente marca algo como importante: destacar un proyecto en un panel, guardar una receta, fijar un contacto o señalar un correo. La casilla es un input real escondido tras una estrella SVG, así que funciona con teclado, conserva su anillo de foco y dice a los lectores de pantalla si está marcada.

Al marcarla, la estrella gira una punta, crece un poco y toma un brillo suave del color principal, mientras el secundario tiñe el fondo. El dorado se entiende como favorito; el azul o el violeta, como fijado.