Billete picado

Un billete de tren: al marcarlo, la picadora agujerea la matriz y el círculo de papel cae.

Ajustes

Color principal#d8452e

Color secundario#f3ead6

Tamaño16px

Velocidad1x

Texto

Código

index.html

<label class="uvq02-tkt"><input type="checkbox"><span class="pz" aria-hidden="true"><i class="tg"></i><i class="hl"></i><i class="ch"></i></span><span class="bd"><small aria-hidden="true">MAD → LIS · 08:45</small><b>Validar billete</b><i class="bc" aria-hidden="true"></i></span></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.

Versión Markdown con todo el código, para asistentes de IA

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

Esta casilla se dibuja como un billete de tren de papel, con matriz troquelada, una línea de ruta y un pequeño código de barras. Al marcarla, la picadora abre un agujero en la matriz y el círculo recortado cae girando. Es HTML y CSS sobre un checkbox real, así que encaja en validación de billetes, control de acceso a eventos, embarques y apps de viaje.

El color principal marca la guía de la picadora y el texto validado; el secundario es el tono del papel. Cambia la ruta por tus propios códigos y apila varios billetes en columna para viajes con escalas o reservas de grupo.