HTML + CSSBotones

Manga de viento

Una manga de viento que se hincha y ondea según lo rápido que mueves el ratón por encima, con los nudos al lado.

Ajustes

16px
1x

Código

<button class="uvq01-wnd" type="button"><span class="po" aria-hidden="true"><span class="sk"><i></i><i></i><i></i><i></i><i></i></span></span><span class="t">Ver previsión</span><span class="kn" aria-hidden="true"><b>0</b> kn</span></button>

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 Botones

Ver todos: Botones

Dónde usarlo

Una pequeña escena de aeródromo o playa sobre una píldora azul cielo: un mástil en la hierba con una manga de viento naranja y blanca. Mover el puntero rápido por encima cuenta como viento, así que la manga se levanta, se hincha y ondea más deprisa, y una etiqueta marca la velocidad en nudos. Cuando el aire se calma vuelve a caer. Ideal para escuelas de kitesurf.

El color principal son las franjas de la manga y el secundario el cielo, así que una manga de aeropuerto roja y blanca también funciona. Un clic o el foco del teclado mandan una ráfaga y, con el movimiento reducido, la manga se mueve sin aletear.