<body>
<div class="bulb-container">
<div class="bulb off" id="bulb"></div>
<div class="bulb-bottom">
<div class="raya-clara"></div>
<div class="raya-oscura"></div>
<div class="raya-clara"></div>
<div class="raya-oscura"></div>
<div class="raya-clara"></div>
<div class="raya-oscura"></div>
<div class="raya-clara"></div>
<div class="raya-oscura"></div>
<div class="raya-clara"></div>
<div class="raya-oscura"></div>
<div class="raya-clara"></div>
<div class="raya-oscura b"></div>
<div class="raya-fin"></div>
</div>
</div>
<div class=switch>
<button onClick="switchBulb()" class="switch-button" id="btn"> On / Off </button>
</div>/*Common Objects*/
body{
background-color: #0A122A;
}
/*Bulb*/
.bulb-container{
display:grid;
padding:50px 0 25px 0 ;
border-color:white;
justify-content:center;
flex-flow:column;
}
.bulb{
width: 200px;
height:200px;
border-radius:50%;
}
.bulb-bottom{
position:relative;
display:flex;
flex-flow:column;
align-items:center;
width:200px;
bottom:10px;
}
.raya-clara{
padding:3px;
background-image: linear-gradient(to left, darkgray, white, darkgray);
width:75px;
border-radius:45%;
}
.raya-oscura{
padding:2px;
background-image: linear-gradient(to left, gray, darkgray, gray);
width:72px;
border-radius:25%;
}
.raya-fin{
padding:5px;
background-image: linear-gradient(to left, black , #818787, black);
width:25px;
border-radius:25%;
}
.b{
box-shadow: 0 10px 10px 0 black;
}
.on{
background-image: radial-gradient(farthest-side at 65% 20%,white, yellow,#F7CB15);
box-shadow:0px 0px 50px 10px yellow;
}
.off{
background-image: radial-gradient(farthest-side at 65% 20%, RGB(206,206,206,1),RGB(155,163,156,1),RGB(129,135,135,1));
}
.switch{
display:flex;
border-color:white;
}
.switch-button{
position:relative;
padding: 30px;
border-radius:50%;
font-size:3em;
margin: 40px auto;
}//document.getElementByID("btn").addEventListener("click",switchBulb);
function switchBulb(){
var element= document.getElementById("bulb");
var status = element.classList.toggle("on");
if (status !== false){
var status = element.classList.remove("off");
} else
var status = element.classList.add("off");
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.