<div class="cambiador">
<input type="checkbox" id="interruptor" class="check">
<b class="b interruptor"></b>
</div>
.visible{
visibility: visible;
}
.hide {
display: none;
}
.cambiador {
position: relative;
width: 80px;
height: 35px;
/*border: 1px solid #000; */
border-radius: 100px;
/*Color Inicial fondo interruptor que se puede cambiar*/
background-color: #aaaaaa;
overflow: hidden;
box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.05);
}
.cambio_fondo{
/*Color secundario fondo interruptor que se puede cambiar*/
background-color:#000;
}
.check {
position: absolute;
display: block;
cursor: pointer;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 6;
}
.check:checked ~ .interruptor {
right: 2px;
left: 57.5%;
transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-property: left, right;
transition-delay: .08s, 0s;
/*Color secundario boton interruptor que se puede cambiar*/
background-color: #ffa900;
}
.interruptor {
position: absolute;
left: 2px;
top: 2px;
bottom: 2px;
right: 57.5%;
/*Color inicial fondo interruptor que se puede cambiar*/
background-color:#4353ff;
border-radius: 36px;
z-index: 1;
transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-property: left, right;
transition-delay: 0s, .08s;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
document.addEventListener("DOMContentLoaded", function () {
var interruptor = document.getElementById("interruptor");
var TiMensual = document.getElementById("mensual");
var TiAnual = document.getElementById("anual");
var TiFondo = document.getElementsByClassName("cambiador")[0];
TiMensual.classList.add("hide");
TiMensual.style.visibility = "visible";
interruptor.addEventListener("click", function () {
TiMensual.classList.toggle("hide");
TiAnual.classList.toggle("hide");
TiFondo.classList.toggle("cambio_fondo");
})
});
Como siempre esperamos tus comentarios y por supuesto si tienes alguna duda o necesitas ayuda puedes contactar por nuestro grupo de Telegram o dejando un comentario.
Nos vemos en la próxima. 👌
Ayúdanos a que esta sección siga siendo gratuita
Esta sección, al igual que todo el contenido de esta página, se ofrece de manera gratuita.
Esto supone una gran cantidad de trabajo, que ofrecemos de manera altruista, y un coste económico para el que pedimos una pequeña contribución para poder seguir dando este servicio a la comunidad de usuarios de OxygenBuilder.
