WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Interruttore di alimentazione
917
AmirAliAkrami
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
13 June 2025
Un codice di Metehan
28 August 2025
Studio di progettazione architettonica: design moderno e sostenibile
28 August 2025
Modulo di registrazione di Matrix Login HTML CSS
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"); } }