Bouton Mode sombre et Mode nuit

2,446 Anes_unk

Ouvrir dans l'éditeur Publiez votre code

Recommandé

14 May 2025

Un code par toninrazafison

27 May 2026

Code source du jeu HTML5 Retro Bowl

25 February 2026

Bouton de commande animé HTML CSS JavaScript

HTML

CSS

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0A1128;
    color: white;
    transition: background-color 0.4s ease, color 0.4s ease;
}

.theme-button {
    padding: 15px 30px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    background-color: #00A3E0;
    color: white;
    font-weight: bold;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: background-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
    font-size: 18px;
    position: relative;
    overflow: hidden;
    letter-spacing: 1px;
}

.theme-button i {
    margin: 0 10px;
    transition: transform 0.4s ease;
}

.theme-button:hover {
    background-color: #007F7F;
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.theme-button:hover i {
    transform: scale(1.1);
}

.theme-button::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.theme-button:hover::after {
    opacity: 1;
}

body.light {
    background-color: #FFFFFF;
    color: #000;
}

body.light .theme-button {
    background-color: #007F7F;
}

body.light .theme-button:hover {
    background-color: #005F5F;
}

body.light .theme-button:hover i {
    transform: scale(1.1);
}