WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Interruttore di alimentazione
541
AmirAliAkrami
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
8 May 2025
armadietto animato
19 October 2024
Codice della barra di navigazione HTML CSS
29 May 2025
Un codice di mathieu.ratro
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"); } }