Skip to main content
Commonmark migration
Fonte Link

##Agora sobre o CSS

Agora sobre o CSS

##Agora sobre o CSS

Agora sobre o CSS

inclui novas instruções
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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.

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.

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.

revisão de informação
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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.

inserir a descrição da imagem aquiinserir a descrição da imagem aqui

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";
}

    
<input class="btn" role="checkbox" aria-checked="false" type="checkbox" name="" id="">

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.

inserir a descrição da imagem aqui

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="">

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.

inserir a descrição da imagem aqui

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";
}

    
<input class="btn" role="checkbox" aria-checked="false" type="checkbox" name="" id="">
inclui novas instruções
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166
Carregando
inclui novas instruções
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166
Carregando
Fim da Recompensa com 50 pontos de reputação concedidos por Woss
inclui novas instruções
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166
Carregando
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166
Carregando