WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Interrupteur d'alimentation
913
AmirAliAkrami
Ouvrir dans l'éditeur
Publiez votre code
11 January 2024
Interrupteur ampoule
12 August 2024
Interrupteur électronique
HTML
Copy
Team Seton-AmirAkrami
CSS
Copy
body {background-color: black;} .box { border: 1px solid black; width: 800px; border-radius: 20px; height: 400px; margin: 100px auto; background-color: #f4f4f0; } .triangle { box-shadow: 50px 120px 10px 5px #77787b33; width: 50px; height: 50px; background-color: #656562; margin: auto; border-bottom: 12px groove #77787b33; border-top-left-radius: 50px; border-top-right-radius: 50px; } #sim {box-shadow: 50px 120px 10px 5px #77787b33; background-color: black; width: 1px; height: 30px; margin: auto; } button { background-color: rgb(213, 242, 213); width: 40px; height: 60px; margin-top: 10px; display:block; margin-left: 20px; border: none; } #btn { background-color: #8da165; width: 10px; height: 20px; transition: all 0.3s; border-top: 5px solid rgb(103, 97, 97); margin-top: 1%; margin-left:7.2px; } .text { width: 200px; height: 50px; padding: 15px; margin-left: 37%; font-size: 35px; font-family: cursive; color: #eaece6; animation: GreenCode 1s linear infinite; } @keyframes GreenCode { 0% { opacity: 0; } 50% { opacity: .5; } 100% { opacity: 1; } } .active { box-shadow: 0 150px 100px 95px #e8d724b3; }
JS
Copy
let text = document.querySelector(".text") let box = document.querySelector(".box") let btn = document.querySelector("#btn") let triangle = document.querySelector(".triangle") function btnlight() { if (triangle.classList.contains("deactive")) { text.style.color = "green" btn.style.backgroundColor = "#e5d44f" box.style.backgroundColor="#dcda92fe" btn.style.borderTop = "0px " btn.style.borderBottom = "5px solid rgb(103, 97, 97)" triangle.style.borderBottom = "12px groove #e9de6eb3" triangle.classList.replace("deactive", "active"); } else { text.style.color = "#eaece6" btn.style.backgroundColor = "#8da165" btn.style.borderBottom = "0px " btn.style.borderTop = "5px solid rgb(103, 97, 97)" box.style.backgroundColor="#f4f4f0" triangle.style.borderBottom = " 12px groove #77787b33" triangle.classList.replace("active", "deactive"); } }