WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Interruptor de energia
791
AmirAliAkrami
Abrir no Editor
Publique Seu Código
Recomendado
22 July 2025
dê uma olhada na função
8 February 2025
Texto deslizante
7 November 2024
Formulário de login
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"); } }