<div class="frame">
	<h3>CSS Only bulb</h3>
	
	<div class="bulb-switch">
		<input type="checkbox" id="bulbSwitchInput"><label>Switch ON</label>
  </label>
	</div>
  <div class="center">
		<div class="bulb" id="bulb">
			<div class="bulb-top"></div>
			<div class="bulb-bottom">
			</div>
		</div>
  </div>
</div>

// delete the following line if no text is used
// edit the line if you wanna use other fonts
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

// use only the available space inside the 400x400 frame
.frame {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 400px;
	margin-top: -200px;
	margin-left: -200px;
	border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
	overflow: hidden;
	background: #404556;
	color: #333;
	font-family: "Open Sans", Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.bulb {
	.bulb-top {
		width: 100px;
		height: 100px;
		background: white;
		border-radius: 100%;
		position: relative;
		transition:0.5s linear;
		& .on{
			background:yellow;
			box-shadow: 0 0 40px 2px yellow;
		}
		&:after {
			content: "";
			position: Absolute;
			transition:0.5s linear;
			width: 50px;
			height: 50px;
			bottom: -25px;
			border-radius: 100% 100% 10px 10px;
			background: white;
			left: 0;
			right: 0;
			margin: 0 auto;
		}
	}
	.bulb-bottom {
		width: 50px;
		height: 8px;
		background: silver;
		border-radius: 10px;
		top: 30px;
		position: relative;
		margin: 0 auto;
		&:before {
			content: "";
			width: 50px;
			height: 8px;
			background: silver;
			border-radius: 10px;
			top: 12px;
			position: absolute;
			margin: 0 auto;
		}
		&:after {
			content: "";
			position: Absolute;
			top: 24px;
			border-bottom: 10px solid silver;
			border-left: 12.5px solid transparent;
			border-right: 12.5px solid transparent;
			height: 0;
			width: 25px;
			transform: rotate(180deg);
		}
	}
	&.on{
		.bulb-top{
			background:yellow;
			box-shadow: 0 0 40px 2px yellow;
			&:after{
				background:yellow;
			}
		}
	}
}
h3{
	color:#fff;
	font-weight:bold;
	float:left;
	margin:10px;
}
.bulb-switch{
	color:#fff;
	font-weight:bold;
	float:right;
	margin:10px;
	label{
		margin-left:5px;
	}
}

/* Switch starts here */
.rocker {
  display: inline-block;
  position: relative;
  /*
  SIZE OF SWITCH
  ==============
  All sizes are in em - therefore
  changing the font-size here
  will change the size of the switch.
  See .rocker-small below as example.
  */
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  color: #888;
  width: 7em;
  height: 4em;
  overflow: hidden;
  border-bottom: 0.5em solid #eee;
}

.rocker-small {
  font-size: 0.85em; /* Sizes the switch */
  margin: 1em;
}

.rocker::before {
  // content: "";
  // position: absolute;
  // top: 0.5em;
  // left: 0;
  // right: 0;
  // bottom: 0;
  // background-color: #999;
  // //border: 0.5em solid #eee;
  // border-bottom: 0;
}

.rocker input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-left,
.switch-right {
  cursor: pointer;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5em;
  width: 3em;
  transition: 0.2s;
}

.switch-left {
  height: 2.4em;
  width: 2.75em;
  left: 0.85em;
  bottom: 0.4em;
  background-color: #ddd;
  transform: rotate(15deg) skewX(15deg);
}

.switch-right {
  right: 0.5em;
  bottom: 0;
  background-color: #bd5757;
  color: #fff;
}

.switch-left::before,
.switch-right::before {
  content: "";
  position: absolute;
  width: 0.4em;
  height: 2.45em;
  bottom: -0.45em;
  background-color: #ccc;
  transform: skewY(-65deg);
}

.switch-left::before {
  left: -0.4em;
}

.switch-right::before {
  right: -0.375em;
  background-color: transparent;
  transform: skewY(65deg);
}

input:checked + .switch-left {
  background-color: #0084d0;
  color: #fff;
  bottom: 0px;
  left: 0.5em;
  height: 2.5em;
  width: 3em;
  transform: rotate(0deg) skewX(0deg);
}

input:checked + .switch-left::before {
  background-color: transparent;
  width: 3.0833em;
}

input:checked + .switch-left + .switch-right {
  background-color: #ddd;
  color: #888;
  bottom: 0.4em;
  right: 0.8em;
  height: 2.4em;
  width: 2.75em;
  transform: rotate(-15deg) skewX(-15deg);
}

input:checked + .switch-left + .switch-right::before {
  background-color: #ccc;
}

/* Keyboard Users */
input:focus + .switch-left {
  color: #333;
}

input:checked:focus + .switch-left {
  color: #fff;
}

input:focus + .switch-left + .switch-right {
  color: #fff;
}

input:checked:focus + .switch-left + .switch-right {
  color: #333;
}

// jQuery v3.3.1 is supported

const bulbSwitch = function() {
	let bulbSwitchInput = document.getElementById("bulbSwitchInput");
	bulbSwitchInput.addEventListener("change", event => {
		let bulbInput = document.getElementById("bulb");
		if (event.target.checked) {
			bulbInput.classList.add("on");
		} else {
			bulbInput.classList.remove("on");
		}
	});
};

bulbSwitch();