WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Interruptor de energia
1258
AmirAliAkrami
Abrir no Editor
Publique Seu Código
Recomendado
28 May 2025
Caneta de pena
19 July 2025
Fragmento HTML de animação de texto 3D
22 August 2025
Site do escritório de advocacia: Tailwind CSS, Serviços Jurídicos
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"); } }