Bouton bascule du mode clair HTML/CSS/JS

1,174 Primes

Ouvrir dans l'éditeur Publiez votre code

Bouton bascule du mode clair HTML/CSS/JS

Recommandé

22 November 2025

Code HTML du jeu Snake

30 May 2026

Exemple de modèle de site web HTML basique

10 January 2026

Modèle de formulaire de connexion HTML

HTML

CSS

: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;
}