Botón de alternancia de modo claro HTML/CSS/JS

Abrir en el editor Publica tu código

Recomendado

12 April 2025

Un código de Metehan

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

Botón de alternancia de modo claro HTML/CSS/JS

Recomendado

Un código de Farah

Efecto de texto neón

Un código de Metehan

HTML

CSS

JS

Recomendado

Un código de Farah

Efecto de texto neón

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS