Botão Switch html

Botão Switch html e css

O botão Switch html permite a escolha de apenas uma entre duas opções (Ativado ou Desativado).

Neste artigo Aprenda a criar o Botão Switch para Ativar e Desativar  

Nesta seção, projetaremos uma estrutura básica no html. 

Usaremos A Tag <div>,<label>, e a tag <input> para alternar com css.

Essas são as tags que usaremos no html

Vamos Adicionar o Html

  <div class="switch">
                        
    <input type="checkbox" id="switch" />
    <label for="switch">Toggle</label>
                    
  </div>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar e da o efeito desejado no Botão Switch html e css.

.switch {

    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

} 

input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
}

label {
  cursor: pointer;
  text-indent: -9999px;
  width: 35px;
  height: 20px;
  background: #d0d0d0;
  display: block;
  border-radius: 100px;
  position: relative;
}

label:after {

 content: "";
 position: absolute;
 top: 4px;
 left: 4px;
 width: 12px;
 height: 12px;
 background: #5e5959;
 border-radius: 90px;
 transition: 0.3s;

}

input:checked + label {
 
  background: #00c3ff;

}

input:checked + label:after {

  background: #ffffff;  
  left: calc(100% - 5px);
  transform: translateX(-100%);

}

label:active:after {

  width: 15px;

}

Combinando as Duas seções acima Html + Css temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando