WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ying Yang Toggle
1718
Andev.web
Open In Editor
Publish Your Code
Recommended
22 July 2025
frying egg loading
16 November 2024
Toggle Sidebar Navigation
14 September 2024
Minion Eye Toggle
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"); });