HTML + CSSToggles
Toggle con carita
La bola es una carita dormida que rueda, abre los ojos, parpadea y se sonroja al activarse.
Ajustes
16px
1x
Código
<label class="uv-tfc"><input type="checkbox" role="switch"><span class="tr"><span class="kn"><i class="e l"></i><i class="e r"></i><i class="ch l"></i><i class="ch r"></i><i class="mo"></i></span></span>Despertador</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 Toggles
Ver todos: TogglesDónde usarlo
Un poco de personaje convierte un control diminuto en algo que se recuerda. Desactivado, la bola muestra los ojos cerrados y una boca plana; activado, rueda al otro lado, abre unos ojos redondos, parpadea cada pocos segundos y se le sonrojan las mejillas. Perfecto para despertadores, apps infantiles, registros de sueño y preferencias de bienvenida amables.
El color principal llena el carril y el secundario tiñe las mejillas. Todo son formas CSS, así que la cara escala bien con el tamaño y el parpadeo se detiene con movimiento reducido.