About
Explore
Events & Classes
Support Us
Join
Sign In
Illyaas
View Project Page
Run
Fullscreen
Light Bulb
HTML
CSS
JS
<!DOCTYPE html> <html> <head><meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <section> <button onclick="document.querySelector('div').style.background='yellow'">Light on</button> <div></div> <button onclick="document.querySelector('div').style.background='gray'">light off</button></section >  </body> </html>
body{background-image: linear-gradient(-60deg, white, #ddd); background-size: cover; background-position: center; box-sizing: border-box;} section { display: flex; justify-content: space-around; align-items: center;Â overflow: scroll; margin-top: 10rem; flex-wrap: wrap;} div { height: 200px; width: 200px; background: gray; border-radius: 50%; align-items: center; transform: scale(1); transition: all 1s; Â margin:auto;} div:hover { transform: scale(1.2); } button { margin:auto; border: none; background: blue; color: white; border-radius: 20px; width: 100px; height: 100px; transition: all 1s; transform: scale(1); font-size: 20px; } button:hover { transform: scale(1.5); background: cyan; color: black; }
alert('Thanks for viewing')