WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Alternar Ying Yang
2098
Andev.web
Abrir en el editor
Publica tu código
Recomendado
16 November 2024
Alternar barra lateral
8 September 2024
Alternar serpiente
18 May 2024
Alternar emoji
HTML
Copy
Andev Web
CSS
Copy
:root { --first-half: 65%; } body { display: flex; justify-content: center; align-items: center; height: 100vh; padding: 0; background-color: #6d8d9d; overflow: hidden; } .toggle { position: relative; display: flex; justify-content: space-between; width: 20rem; height: 10rem; border-radius: 5rem; background: linear-gradient(0deg, #222, #222 50%, #fff 50%, #fff 100%); background-size: 18rem 100%; background-position: 1rem 0; background-repeat: no-repeat; cursor: pointer; overflow: hidden; transition: all 0.5s ease; } .toggle:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 5rem; box-shadow: inset 0 0.1rem 0.4rem 0 black; outline: 1rem solid #6d8d9d; z-index: 1; transition: all 0.5s ease; } .toggle:hover:before { box-shadow: inset 0 0.1rem 0.6rem 0 black; } .toggle__black, .toggle__white { position: relative; height: 100%; } .toggle__black:before, .toggle__white:before { content: ""; position: absolute; border-radius: 50%; } .toggle__black { width: var(--first-half); background-color: #222; border-radius: 0 5rem 0 0; transition: all 0.5s ease; } .toggle__black:before { top: 25%; left: calc(50% - 1.5rem); width: 3rem; height: 3rem; background-color: #fff; transition: all 0.5s ease; } .toggle__white { width: calc(100% - var(--first-half)); background-color: #fff; border-radius: 0 0 0 3rem; transition: all 0.5s ease; } .toggle__white:before { bottom: 25%; left: calc(50% - 0.75rem); width: 1.5rem; height: 1.5rem; background-color: #222; transition: all 0.5s ease; } .toggle--active { --first-half: 35%; } .toggle--active .toggle__black { border-radius: 0 3rem 0 0; } .toggle--active .toggle__black:before { left: calc(50% - 0.75rem); width: 1.5rem; height: 1.5rem; } .toggle--active .toggle__white { border-radius: 0 0 0 5rem; } .toggle--active .toggle__white:before { left: calc(50% - 1.5rem); width: 3rem; height: 3rem; }
JS
Copy
const toggleElement = document.getElementById("toggle"); toggleElement.addEventListener("click", () => { toggleElement.classList.toggle("toggle--active"); });