Plantilla CSS: Estilo de botón deshabilitado (button:disabled)
📝 Uso previsto
Esta plantilla es útil cuando deseas comunicar visualmente que un botón está inactivo. Se puede utilizar en formularios u otras interfaces donde las acciones estén deshabilitadas.
📘 Explicación
Usamos la pseudoclase :disabled para aplicar estilos específicos a un botón deshabilitado. Al ajustar opacity y cambiar el cursor a not-allowed, hacemos claro que el botón no puede ser interactuado.
🔹 Código parcial
<button class="disabled-button" disabled>No se puede enviar</button>
<style>
.disabled-button {
background-color: #999;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 6px;
font-size: 1rem;
cursor: not-allowed;
opacity: 0.6;
}
.disabled-button:disabled {
background-color: #ccc;
color: #666;
cursor: not-allowed;
opacity: 0.5;
}
</style>
🔸 Código HTML completo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Botón deshabilitado</title>
<link rel="stylesheet" href="/assets/css/template-common.css?v=1">
<style>
.disabled-button {
background-color: #999;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 6px;
font-size: 1rem;
cursor: not-allowed;
opacity: 0.6;
}
.disabled-button:disabled {
background-color: #ccc;
color: #666;
cursor: not-allowed;
opacity: 0.5;
}
</style>
</head>
<body>
<button class="disabled-button" disabled>No se puede enviar</button>
</body>
</html>
🚦 Técnicas de diseño UX para botones deshabilitados
El estilo de los botones en estado :disabled es un elemento clave que afecta significativamente la usabilidad de una interfaz de usuario. Proporcionar una retroalimentación visual adecuada ayuda a evitar la confusión del usuario.
🎨 Buenas prácticas de diseño
El estado deshabilitado debe representarse claramente mediante los siguientes elementos:
- Reducir la opacity para hacerlo semitransparente
- Cambiar el color de fondo a tonos grises
- Usar cursor: not-allowed para indicar que no se puede interactuar
- Atenuar el color del texto para disminuir el contraste
✨ Mejora de la interacción
Usar transition para suavizar el cambio de estado de deshabilitado a habilitado facilita que el usuario perciba la transición. También es útil mostrar un tooltip que explique por qué el botón está deshabilitado.
⚠️ Consideraciones de accesibilidad
Para usuarios con deficiencias visuales, es importante no depender únicamente del color. Usa formas o patrones para indicar el estado. Asegúrate de aplicar correctamente los atributos ARIA para que los lectores de pantalla puedan comunicar el estado del botón.
El diseño de un botón deshabilitado debe idealmente comunicar al usuario por qué no puede interactuar con él. Es fundamental lograr un equilibrio entre que no llame demasiado la atención, pero sí sea claramente distinguible.