WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Bouton de changement de thème
10105
loader7
Ouvrir dans l'éditeur
Video
Publiez votre code
14
Recommandé
16 January 2026
Modèle HTML de joueur de jeu Ruffle Flash
16 January 2026
Lecteur de jeux Flash avec émulateur Ruffle
13 June 2024
DICTIONNAIRE ET PRONONCIATION DES MOTS
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) */