WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Bouton bascule du mode clair HTML/CSS/JS
752
Primes
Ouvrir dans l'éditeur
Video
Publiez votre code
1
Recommandé
10 July 2023
Basculer mode sombre CSS
13 October 2025
Éléments HTML du conteneur d'animation CSS
18 December 2025
Code HTML du jeu Aquapark IO débloqué
HTML
Copy
BUTTON
CLICK ME
CSS
Copy
:root { --dark: rgb(12, 12, 12); --light: white; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } /* Default (dark theme) */ body { min-height: 100vh; background-color: var(--dark); display: flex; align-items: center; justify-content: center; transition: background 0.3s; } button { position: relative; width: 300px; height: 80px; background-color: var(--light); color: var(--dark); border: none; border-radius: 20px; font-size: 30px; box-shadow: 0 4px 20px rgba(255, 255, 255, 0.247); transition: 0.3s; cursor: pointer; z-index: 1; } button::before { content: ""; position: absolute; top: -5px; left: -5px; width: calc(100% + 10px); height: calc(100% + 10px); border: 2px solid rgb(255, 255, 255); border-radius: 25px; pointer-events: none; box-sizing: border-box; z-index: 0; } button:hover{ transition: 0.2s; animation: buttonHoverUp 0.4s forwards; } /* Animation button */ @keyframes buttonHoverUp{ 0% { width: 300px; transition: 0.1s; box-shadow: 0 4px 20px rgba(255, 255, 255, 0.247); } 60% { width: 330px; box-shadow: 0 4px 50px rgba(255, 255, 255, 0.247); } 100% { width: 300px; transition: 0.3s; box-shadow: 0 4px 20px rgba(255, 255, 255, 0.247); } } @keyframes buttonHoverUpDark{ 0% { width: 300px; transition: 0.1s; box-shadow: 0 4px 30px rgba(12, 12, 12, 0.753); } 60% { width: 330px; box-shadow: 0 4px 50px rgba(0, 0, 0, 0.808); } 100% { width: 300px; transition: 0.3s; box-shadow: 0 4px 30px rgba(12, 12, 12, 0.753); } } /* Light theme switch */ body.light-mode { background-color: var(--light); transition: background 0.3s; } body.light-mode button { background-color: var(--dark); color: var(--light); box-shadow: 0 4px 30px rgba(12, 12, 12, 0.753); } body.light-mode button::before { border: 2px solid rgb(12, 12, 12); } body.light-mode button:hover{ animation: buttonHoverUpDark 0.4s forwards; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */