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.