Modelo CSS: Estilo de botão desabilitado (button:disabled)
📝 Uso previsto
Este modelo é útil quando você deseja comunicar visualmente que um botão está inativo. Pode ser usado em formulários ou outras interfaces onde as ações estão desabilitadas.
📘 Explicação
Usamos a pseudoclasse :disabled para aplicar estilos específicos a um botão desabilitado. Ajustando a opacidade e alterando o cursor para not-allowed, mostramos claramente que o botão não pode ser interagido.
🔹 Código parcial
<button class="disabled-button" disabled>Não pode 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="pt">
<head>
<meta charset="UTF-8">
<title>Botão desabilitado</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>Não pode enviar</button>
</body>
</html>
🚦 Técnicas de UX para botões desativados
O estilo de botões no estado :disabled é um elemento fundamental que impacta fortemente a usabilidade da interface do usuário. Fornecer feedback visual adequado ajuda a evitar confusão por parte do usuário.
🎨 Melhores práticas de design
O estado desativado deve ser claramente representado com os seguintes elementos:
- Reduzir a opacity para deixá-lo semitransparente
- Alterar a cor de fundo para tons de cinza
- Usar cursor: not-allowed para indicar que não é clicável
- Suavizar a cor do texto para reduzir o contraste
✨ Aprimorando a interação
Aplicar transition para suavizar a mudança de desativado para ativo torna a alteração mais perceptível para o usuário. Também é eficaz exibir um tooltip explicando por que o botão está desativado.
⚠️ Considerações de acessibilidade
Para usuários com daltonismo, é importante não depender apenas da cor: use formas ou padrões para indicar o estado. Certifique-se de configurar corretamente os atributos ARIA para que leitores de tela consigam identificar o estado do botão.
O ideal é que o design de um botão desativado comunique claramente ao usuário o motivo da indisponibilidade. O botão não deve chamar atenção em excesso, mas ainda assim precisa ser distinguível com clareza.