HTML + CSSToggles

Toggle de sonido

El altavoz emite ondas que laten cuando hay sonido y una raya roja lo tacha al silenciarlo.

Ajustes

16px
1x

Código

<label class="uv-tsd"><input type="checkbox" role="switch"><span class="tr"><span class="kn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9.5h3l4.5-4v13l-4.5-4H4z" fill="currentColor"/><path class="w1" d="M15 9.5a3.5 3.5 0 0 1 0 5"/><path class="w2" d="M17.5 7a7 7 0 0 1 0 10"/><path class="sl" d="M3 3l18 18" pathLength="1"/></svg></span></span>Sonido</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

Dónde usarlo

Los botones de silencio están por todas partes, de reproductores de vídeo a juegos y herramientas de reuniones, y el icono tiene que dejar claro el estado de un vistazo. Aquí la bola lleva un altavoz: desactivado, una raya roja lo cruza; activado, la raya se recoge y dos ondas aparecen y laten suave mientras el carril se vuelve verde.

Úsalo para sonidos de notificación, vídeo con reproducción automática, audio de juegos o un reproductor de podcasts. La etiqueta sigue visible al lado, así que el significado no depende solo del icono.