bulb on off using js
code 👇🏻
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
body {
margin: 0;
padding: 0;
background: #151515;
}
img {
width: 100%;
}
.btn-box {
display: flex;
align-items: center;
justify-content: center;
}
button {
background: #151515;
border: none;
padding: 10px 20px;
font-weight: bold;
font-size: 20px;
letter-spacing: 3px;
font-variant: small-caps;
margin: 0 30px 0 30px;
color: crimson;
border-radius: 50px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.7),-5px -5px 10px rgba(70,70,70,0.3);
}
button:hover {
box-shadow: inset 5px 5px 10px rgba(0,0,0,0.7),inset -5px -5px 10px rgba(70,70,70,0.3);
color: deepskyblue;
}
a {
background-color: #151515;
text-decoration: none;
display: block;
width: 100%;
text-align: center;
color: forestgreen;
font-family: 'Poppins',sans-serif;
letter-spacing: 10px;
font-size: 18px;
font-weight: 600;
font-variant: small-caps;
padding: 5px 0;
border-radius: 5px;
position: absolute;
bottom: 0;
-webkit-box-shadow: -5px -5px 10px rgba(0,0,0,0.3);
box-shadow: -5px -5px 10px rgba(0,0,0, 0.3);
}
</style>
</head>
<body>
<img id="bulb" src="https://i.postimg.cc/pTHf3rbS/bulboff.png" alt="bulboff.jpg">
<div class="btn-box"> <button onclick="document.getElementById('bulb').src='https://i.postimg.cc/3RFXhh3x/bulbon.png'">Bulb on</button> <button onclick="document.getElementById('bulb').src='https://i.postimg.cc/pTHf3rbS/bulboff.png'">Bulb off</button>
</div> <a href="https://youtu.be/nDjLHHX7Oto">Tutorial</a>
</body>
</html>