Estados de la interfaz
Redactado por
Sebastian V. Fecha de publicación
05/07/2025
Tiempo de lectura
6 min
Tema
Interactions
¿Qué son los Estados de Interfaz?
Los estados de interfaz son las diferentes formas visuales que un componente interactivo puede adoptar dependiendo de la situación, del dispositivo o de la interacción directa del usuario. En la web moderna, los elementos nunca tienen un solo diseño estático.
¿Para qué sirven?
Sirven para dar contexto absoluto al usuario sobre qué se puede hacer, qué se está haciendo y qué no se puede hacer. Es el lenguaje visual universal de la usabilidad.
- Hover (Exploración): Indica "Puedes interactuar conmigo" al levantar un elemento o iluminarlo sutilmente.
- Active (Acción): Confirma que el clic fue físico y registrado (generalmente hundiendo el botón).
- Focus (Accesibilidad): Guía al usuario que navega sin ratón, indicando en qué elemento exacto se encuentra.
- Disabled (Restricción): Muestra qué acciones están bloqueadas temporalmente sin tener que borrarlas de la pantalla.
¿Cómo se usan?
Se implementan utilizando pseudo-clases en un orden muy específico dictado por la especificidad de CSS. Debes diseñar desde lo general hasta lo particular. Asegúrate de declarar el estado :focus-visible explícitamente para no penalizar visualmente a los usuarios de ratón mientras proteges a los de teclado.
Consejo profesional
El estado :focus es crítico. Nunca uses outline: none; globalmente a menos que proveas un anillo de sombra alternativo usando box-shadow para que los usuarios de teclado no se pierdan ciegos en tu página.
Implementando todos los estados de un botón
<button class="state-btn">Estado Normal</button>
<button class="state-btn" disabled>Estado Disabled</button>Interactúa con los botones (hover, click, y navega con Tab) para ver sus estados.
Errores comunes
Practica lo aprendido
Construye un botón que implemente los 5 estados de forma visual y clara.