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

Call Action Button Hover Effect

Confetti Button

Liquid Glass Mode Apple

HTML

CSS

JS

Recommended

Call Action Button Hover Effect

Confetti Button

Liquid Glass Mode Apple

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS