Ao meu ver o problema é que vc não seguiu uma hierarquia de classes, assim como colocou dois estados do `.btn` como o mesmo estilo. O que segundo as leis da heurística seria incorreto, pois ela não da o *feedback* do estado do `.btn` de forma clara para o usuário. Sempre indicando o estado da interação e do elemento. Veja que quando o usuário faz o `hover` em elemento interativo, vc **deve** indicar que esse elemento tem uma interação disponível! > **Lei n° 1: Visibilidade de qual estado estamos no sistema**<br> É responsabilidade do sistema informar o que está acontecendo em *real time* pro usuário. Sempre que os usuários interagem com um sistema, eles precisam saber se a interação foi bem-sucedida. O sistema realmente captou o evento nesse botão ou ficou ou ignorou, ou está processando algo? O item foi adicionado ao carrinho? O pedido foi aprovado? Um exemplo bem básico é o check duplo do WhatsApp ✔✔. Antigamente o WhatsApp não tinha essa sinalização bem definida, o que deixava os usuários confusos sobre se a mensagem tinha sido `enviada/entregue/lida`. A solução para isso foi usar 3 status de feedback onde, apenas um ✔ significa mensagem enviada, dois ✔✔ significa mensagem entregue, e dois ✔✔ na cor azul significa mensagem lida. [![inserir a descrição da imagem aqui][1]][1] Pense que para o Btn o CSS tb tem seus estados que deve ser usados como `natural/hover/focus/active` e cada um da um tipo de feedback para o usuário > **Lei n° 5: Prevenções de erros**<br> Não é uma boa ideia deixar seu usuário errar sem explicar previamente o motivo do erro. Melhor do que isso, tente criar um interface que permite o usuário não errar. *"Erros são erros conscientes, e muitas vezes (embora não exclusivamente) surgem quando um usuário tem informações incompletas ou incorretas sobre a tarefa, e desenvolve um modelo mental que não corresponde à forma como a interface realmente funciona."* Um botão que não representa todos os estados de interação se torna um fator de erro na interface, e prejudica o usuário no execução de tarefas. Nesse exemplo é difícil de entender o que está ligado ou desligado [![inserir a descrição da imagem aqui][2]][2] Já quando vc adiciona uma cor vc ajuda o usuário a entender o estado do elemento e evita que ele erre ao selecionar o que deseja. [![inserir a descrição da imagem aqui][3]][3] *Fonte:* https://www.nngroup.com/articles/ten-usability-heuristics/ -------------------- ## Agora sobre o CSS Sobre o CSS veja esse diagrama que fiz para entender como poderia funcionar da forma correte e tratando todos os estados do `.btn` [![inserir a descrição da imagem aqui][4]][4] Aplicando os conceito do diagrama acima temos o seguinte resultado. Usei um *pseudo elemento* `::after` para indicar o estado do `.btn` de acordo com a interação feita. Repare que alem da cor vc pode usar outro ***artifício visual*** para acentuar a mudança de estado do elemento, nesse caso eu coloquei uma borda no elemento caso ele esteja `checked`, e mantive a borda no `checked:hover`, mas se não estiver `checked` não tem borda. [![inserir a descrição da imagem aqui][5]][5] Segue o código da imagem acima: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> input { all: unset; } .btn { display: block; width: 50px; height: 50px; position: relative; cursor: pointer; box-sizing: border-box; font-size: 20px; } .btn::after { display: block; margin-left: 60px; content: "btn::after"; } .btn { background-color: red; color: red; } .btn:hover { background-color: purple; color: purple; } .btn:checked { background-color: green; color: green; border: 3px solid #fff; outline: 5px solid green; } .btn:checked:hover { background-color: blue; color: blue; border: 3px solid #fff; outline: 5px solid blue; } .btn:hover::after { content: "btn:hover::after"; } .btn:checked::after { content: "btn:checked::after"; } .btn:checked:hover::after { content: "btn:checked:hover::after"; } <!-- language: lang-html --> <input class="btn" role="checkbox" aria-checked="false" type="checkbox" name="" id=""> <!-- end snippet --> ---------------------- **DICA:** Falando em acessibilidade lembre sempre de deixar o seu elemento o mais semântico possível e sempre acessível para leitores de tela. Uma boa prática é usar os atributos `role="checkbox"` e `aria-checked="false"` para indicar o estado do `.btn` Mais informações aqui: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role **Pontos a se considerar** Sempre é indicado construir também os demais estados do `.btn`, como `:active` e `:focos`, além do estado `disable`. Caso vc esteja pensando em um *Design System* mais avançado sempre é bom tratar todas as variantes. Aqui tem um exemplo bem completo sugerido pelo [Material Design da Google][6] [![inserir a descrição da imagem aqui][7]][7] [1]: https://i.sstatic.net/oFJN7.png [2]: https://i.sstatic.net/r2iRG.png [3]: https://i.sstatic.net/5SNlK.png [4]: https://i.sstatic.net/0ILU1.png [5]: https://i.sstatic.net/CYU4H.gif [6]: https://material.io/design/interaction/states.html#anatomy [7]: https://i.sstatic.net/Y4qsj.png