Light Mode Toggle Button HTML/CSS/JS

Open In Editor Publish Your Code

/* 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;
}

Light Mode Toggle Button HTML/CSS/JS

Recommended

CSS Animated Button

button more

Glass effect social media buttons with neon glow

HTML

CSS

JS

Recommended

CSS Animated Button

button more

Glass effect social media buttons with neon glow

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS