WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un code de PNL
805
PNL
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
16 December 2024
Un code par meriem
24 July 2025
Stickman HTML avec structure de grappin
27 May 2025
Carte de paiement
HTML
Copy
Theme Switch Button
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) */