AIMRAN
HTML + CSSToggles

Toggle líquido

La bola se estira como una gota de líquido al cruzar el carril y vuelve a juntarse al llegar.

Ajustes

16px
1x

Código

<label class="uv-tlq"><input type="checkbox" role="switch"><span class="tr"><svg width="0" height="0" aria-hidden="true"><filter id="uv-tlq-goo"><feGaussianBlur in="SourceGraphic" stdDeviation="3"/><feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -9"/></filter></svg><span class="gg"><i class="a"></i><i class="b"></i></span></span>Notificaciones</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

Palanca retro

TogglesHTML + CSS

Dónde usarlo

Dos círculos blancos se mueven a velocidades un poco distintas bajo un filtro SVG gooey, así que en movimiento se funden en una gota estirada y al final vuelven a ser una bola redonda. A la vez, el carril se llena del color principal. Aporta un tacto suave y orgánico a ajustes de notificaciones, apps de música y productos de bienestar.

El filtro va definido dentro del componente, así que no hay que añadir nada a la página. La velocidad cambia cuánto dura el estiramiento: rápida parece una salpicadura y lenta, miel.