Desliza para pagarPago confirmado
HTML + CSSBotones
Desliza para confirmar
Arrastra la bola hasta el final del carril para pagar; con teclado basta con pulsar Intro.
Ajustes
16px
1x
Código
<div class="uv-swp"><span class="tx">Desliza para pagar</span><span class="ok">Pago confirmado</span><button class="kn" type="button" aria-label="Confirmar pago"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg><svg class="ck" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></button></div>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 Botones
Ver todos: BotonesDónde usarlo
Deslizar para confirmar añade un gesto consciente antes de una acción difícil de deshacer: pagar, enviar dinero, borrar una cuenta o abrir una puerta. El carril se llena de color detrás de la bola mientras avanza, el texto brilla para sugerir el gesto y, si sueltas antes de tiempo, la bola vuelve al inicio con un muelle.
Cuando la bola llega al final, un check sustituye a la flecha y aparece el texto de confirmación; después el control se reinicia. La bola es un botón de verdad, así que Intro o la barra espaciadora lo completan sin arrastrar.