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
É responsabilidade do sistema informar o que está acontecendo em real time pro usuário.
Lei n° 5: Prevenções de erros
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.
Sobre o CSS veja esse diagrama que fiz para entender como poderia funcionar da forma correte e tratando todos os estados do .btn
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.
Segue o código da imagem acima:
input {
all: unset;
}
.btn {
display: block;
width: 50px;
height: 50px;
position: relative;
}
.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;
}
.btn:checked:hover {
background-color: blue;
color: blue;
}
.btn:hover::after {
content: "btn:hover::after";
}
.btn:checked::after {
content: "btn:checked::after";
}
.btn:checked:hover::after {
content: "btn:checked:hover::after";
}
<input class="btn" role="checkbox" aria-checked="false" type="checkbox" name="" id="">
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