WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
8736
loader7
Abrir no Editor
Publique Seu Código
12 July 2025
florescimento de dados
21 May 2025
Página de destino do portfólio
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Theme Switch Button</title> <link rel="stylesheet" href="/css/styles.css" /> </head> <body> <label class="theme-switch"> <input type="checkbox" class="checkbox"> <div class="container"> <div class="circle-container"> <div class="sun-moon-container"> <div class="moon"> <div class="spot"></div> <div class="spot"></div> <div class="spot"></div> </div> </div> </div> </div> </label> </body> </html>
CSS
Copy
body { overflow: hidden; display: flex; justify-content: center; align-items: center; justify-content: center; height: 100vh; } .theme-switch { --toggle-size: 30px; --container-width: 5.625em; --container-height: 2.5em; --container-light-bg: #3D7EAE; --circle-container-diameter: 3.375em; --sun-moon-diameter: 2.125em; --sun-bg: #ECCA2F; --moon-bg: #C4C9D1; --spot-color: #959DB1; --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1); } .theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; font-size: 30px; } .container { width: 5.625em; height: var(--container-height); background-color: var(--container-light-bg); border-radius: 6.25em; overflow: hidden; cursor: pointer; -webkit-box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94); box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94); -webkit-transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25); ; -o-transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25); ; transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25); ; position: relative; } .container::before { content: ""; position: absolute; z-index: 1; inset: 0; -webkit-box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset; box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset; } .checkbox { display: none; } .circle-container { width: 3.375em; height: 3.375em; background-color: rgba(255, 255, 255, 0.1); position: absolute; left: var(--circle-container-offset); top: var(--circle-container-offset); border-radius: 6.25em; -webkit-box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17); -o-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17); transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17); pointer-events: none; } .sun-moon-container { pointer-events: auto; position: relative; z-index: 2; width: var(--sun-moon-diameter); height: var(--sun-moon-diameter); margin: auto; border-radius: 6.25em; background-color: var(--sun-bg); -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset; box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset; -webkit-filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25)); filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25)); overflow: hidden; -webkit-transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25); ; -o-transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25); ; transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25); ; } .moon { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); width: 100%; height: 100%; background-color: var(--moon-bg); border-radius: inherit; -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset; box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset; -webkit-transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25); ; -o-transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25); ; transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25); ; position: relative; } .spot { position: absolute; top: 0.75em; left: 0.312em; width: 0.75em; height: 0.75em; border-radius: 6.25em; background-color: var(--spot-color); -webkit-box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset; box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset; } .spot:nth-of-type(2) { width: 0.375em; height: 0.375em; top: 0.937em; left: 1.375em; } .spot:nth-last-of-type(3) { width: 0.25em; height: 0.25em; top: 0.312em; left: 0.812em; } .checkbox:checked+.container { background-color: #1D1F2C; } .checkbox:checked+.container .circle-container { left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter)); } .checkbox:checked+.container .circle-container:hover { left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em) } .circle-container:hover { left: calc(var(--circle-container-offset) + 0.187em); } .checkbox:checked+.container .moon { -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
