HTML Code
<div class="boss">
<div class="btn-end"></div>
<button>ON</button>
<div id="bulb"></div>
</div>
CSS Code
.boss {
margin-top: 100px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
#bulb {
width: 130px;
height: 130px;
border-radius: 50%;
background-color: grey;
border: 2px solid rgb(61, 61, 61);
position: absolute;
}
button {
position: absolute;
padding: 20px 12px;
margin-top: 124px;
background-color: silver;
font-size: large;
border: 2px solid gray;
cursor: pointer;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.btn-end {
margin-top: 189px;
height: 11px;
width: 18px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
background-color: rgb(63, 63, 61);
}
JS Code
var bulb = document.querySelector("#bulb");
var switchButton = document.querySelector("button")
var current = 0;
switchButton.addEventListener("click", ()=>{
if (current == 0){
switchButton.innerHTML = "OFF",
switchButton.style.padding = "20px 7.5px"
bulb.style.backgroundColor = "yellow"
document.querySelector('body').style.backgroundColor = "rgb(250, 252, 234)";
current = 1;
}else{
switchButton.innerHTML = "ON",
switchButton.style.padding = "20px 12px"
bulb.style.backgroundColor = "grey"
document.querySelector('body').style.backgroundColor = "black";
current = 0;
}
})