Bouton Mode sombre et Mode nuit

2,308 Anes_unk

Ouvrir dans l'éditeur Publiez votre code

Recommandé

27 November 2024

Site Web de portfolio terminé

30 June 2025

danse de formes interactive

31 October 2023

Jeu de Serpent simple

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