Toggle switch html css

Toggle switch html css

Veja neste tutorial como fazer um toggle switch com css e html

Nesta seção, projetaremos uma estrutura simples na tag  <div> e <input>. 

Usaremos as classes (.button, .radius, ..checkbox, .on, .off) e o ID (#btn-switch) para dar o formato do botão e o efeito Toggle switch animado com css.

Essas são as tags e classes que usaremos para criar o nosso Botão toggle com html e Css

Vamos Adicionar o HTML

                <div class="toggle-btn">
                
                    <div class="button radius" id="btn-switch">
                      <input type="checkbox" class="checkbox" />
                      <div class="on"></div>
                      <div class="off"></div>
                    </div>
                                
                </div>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar e animar o  nosso Toggle switch com html e css.

.toggle-btn {

    display: flex;
    margin: auto;
    width: 75px;
    height: 40px;
    box-sizing: border-box;

}

.button-cover {

  height: 100px;
  margin: 20px;
  background-color: #fff;
  box-shadow: 0 10px 20px -8px #c5d6d6;
  border-radius: 4px;

}

.button-cover:before {
  counter-increment: button-counter;
  content: counter(button-counter);
  position: absolute;
  right: 0;
  bottom: 0;
  color: #d7e3e3;
  font-size: 12px;
  line-height: 1;
  padding: 5px;
}

.button-cover,
.on,
.off {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.button {
  position: relative;
  top: 50%;
  width: 74px;
  height: 36px;
  margin: -20px auto 0 auto;
  overflow: hidden;
}

.button.radius,
.button.radius .off {
  border-radius: 100px;
}


.checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.on {
  z-index: 2;
}

.off {
  width: 100%;
  background-color: #e1fbe3;
  transition: 0.3s ease all;
  z-index: 1;
}


#btn-switch {
  overflow: visible;
}

#btn-switch .on:before {

  content: "ON";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 10px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  background-color: #01cc21;
  border-radius: 50%;

}

#btn-switch .off,
#btn-switch .on,
#btn-switch .on:before {

  transform: rotateZ(0);
  transition: 0.4s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;

}

#btn-switch .checkbox:checked + .on {
 
  transform: rotateZ(-180deg);

}

#btn-switch .checkbox:checked + .on:before {

  content: "OFF";
  background-color: #f70000;
  transform: rotateZ(180deg);

}

#btn-switch .checkbox:checked ~ .off {

  background-color: #fdd8d8;
  transform: rotateZ(180deg);

}

Combinando as Duas seções acima Html e Css temos o seguinte Resultado do Botão Toggle switch html css!

Veja o Resultado baixo!

Baixar Código Veja Funcionando