Botones y controles

La regla de esta página: el control nativo se queda

Todos los conmutadores que ves —el switch, los chips, el segmentado— son <input> de verdad vestidos con CSS. El input se oculta visualmente pero sigue en el documento, así que el teclado, el lector de pantalla y el envío de formularios funcionan sin una línea de JavaScript. El selector :has() hace el resto: cuando el input interno cambia, la caja que lo envuelve se entera y se pinta.

Cómo usarlos

1. Copia el CSS y el HTML juntos: en los controles, la estructura es parte del funcionamiento.
2. Para el botón de carga y las pestañas, copia también el JS — son menos de 25 líneas cada uno y no tienen dependencias.
3. Cambia los colores a los de tu marca. Los estados (hover, activo, foco, deshabilitado) ya están definidos: solo retíñelos.

Los 44 píxeles que separan un botón de una frustración

Las guías de accesibilidad táctil convergen en lo mismo: un objetivo táctil necesita unos 44 píxeles de lado para pulsarse sin errar. Todos los botones de esta página parten de min-height: 44px. Cuando reduzcas un botón para un contexto denso —una barra de herramientas, una tabla— reduce el dibujo, no el área: padding negativo visual sí, objetivo táctil pequeño no.

Dónde encajan

• El principal degradado, para la acción única que quieres que ocurra en cada pantalla.
• El fantasma, para todo lo demás: convive con el principal sin competirle.
• El segmentado, para alternar vistas (día/semana/mes) donde un select sería demasiado.
• Las pestañas con teclado, para organizar contenido paralelo sin recargar la página.

Las demás categorías

La familia completa, cada una con sus piezas y su código: formas y recortes, vidrio y neón, bento grid, tarjetas, formularios, datos y métricas y microinteracciones. Y si buscas generadores en vez de piezas hechas, están en Código web.

Preguntas frecuentes

¿Por qué esconder el input en vez de usar un div con onclick?

Porque el input trae gratis lo que el div nunca tendrá: foco con teclado, activación con espacio y enter, anuncio correcto en lectores de pantalla y participación en formularios. El CSS lo oculta a la vista (opacity: 0, 1px), no del árbol de accesibilidad.

¿Qué es :has() y qué pasa si el navegador no lo soporta?

Es el selector que permite estilar al padre según el estado de un hijo — aquí, pintar la caja cuando su input está marcado. Todos los navegadores lo soportan desde finales de 2023. En uno muy antiguo, el control seguiría funcionando; solo perdería el resaltado visual.

¿Las pestañas necesitan una librería?

No: el JS incluido gestiona clic, flechas del teclado, foco y atributos ARIA en unas 20 líneas. Es el patrón oficial de WAI-ARIA reducido a lo esencial.

¿Cómo deshabilito uno de estos botones?

Con el atributo disabled de toda la vida, que además bloquea el foco y lo anuncia al lector de pantalla. Añade un estilo :disabled con opacidad reducida y cursor normal, y evita ocultar botones deshabilitados: es mejor que se vea que existen.

¿Por qué el botón de carga bloquea sus propios clics?

Para evitar el doble envío, que es el bug clásico de los formularios. La clase esta-cargando pone pointer-events: none mientras dura la operación; al terminar, el botón vuelve solo.

¿Puedo usar el brillo que recorre en muchos botones a la vez?

Poder puedes, pero el brillo señala novedad o importancia: si todos brillan, ninguno destaca. Úsalo en un solo elemento por vista, y ten en cuenta que la receta ya lo desactiva para quien pidió movimiento reducido.