Toggle mensual / anual

Cambia de facturación mensual a anual y un sello de ahorro aparece con un pequeño salto.

Ajustes

Color principal#5b5bf7

Color secundario#15b981

Tamaño16px

Velocidad1x

Texto

Código

index.html

<label class="uv-tbi"><input type="checkbox" role="switch"><span class="m">Mensual</span><span class="tr"><span class="kn"></span></span><span class="y">Anual</span><span class="sv">Ahorra un 20 %</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.

Más en Toggles

Ver todos: Toggles

Toggle iOS elástico

TogglesHTML + CSS

Toggle día y noche

TogglesHTML + CSS

Interruptor ON / OFF

TogglesHTML + CSS

Interruptor neón

TogglesHTML + CSS

Toggle con cruz y check

TogglesHTML + CSS

Toggle neumórfico

TogglesHTML + CSS

Interruptor de pared

TogglesHTML + CSS

Toggle líquido

TogglesHTML + CSS

Dónde usarlo

Toda página de precios necesita este control, y el sello es lo que empuja hacia el plan anual. Las dos etiquetas quedan a cada lado del interruptor y la activa se ve opaca del todo. Al elegir anual, una píldora verde con el descuento entra girando con un muelle, así que el ahorro no pasa desapercibido.

Escribe el sello con el control de texto, por ejemplo Ahorra un 20 % o Dos meses gratis. Es un único checkbox, así que puedes leer su estado en un formulario o conectarlo a tu tabla de precios con unas líneas.