@import url(http://weloveiconfonts.com/api/?family=entypo);

*, *:before, *:after {

  margin:0;

  padding:0;

  -webkit-box-sizing:border-box;

  -moz-box-sizing:border-box;

  box-sizing:border-box;

}

#lamp {

  position:relative;

  width:100vw;

  height:100vh;

  overflow:hidden;

}

input[name="switch"], input[name="switch"] + label {

  position:absolute;

  bottom:3rem;

  width:4rem;

  height:4rem;

}

input[name="switch"] + label {right:3rem;}

input[name="switch"] {

  opacity:0;

  z-index:9;

  cursor:pointer;

}

input[value="on"] {

  right:3rem;

}

input[value="off"] {

  right:-4rem;

}

input[name="switch"] + label {

  text-align:center;

}

[class*="entypo-"]:before {

  line-height:4rem;

  font-size:2.5rem;

  color:rgba(255,255,255,0.4);

  font-family:'entypo', sans-serif;

}

input[value="on"]:checked {

  right:-4rem;

}

input[value="on"]:checked + input[value="off"] {

  right:3rem;

}

.lamp {

  position:relative;

  margin:0 auto;

  width:.7rem;

  height:10rem;

  background-image:linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),

                   linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),

                   linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7));

  background-repeat:no-repeat;

  background-size:.15rem 8rem, .4rem .8rem, .7rem 2rem;

  background-position:50% 0, .23rem 8rem, 0 8.8rem;

}

.lamp:before, .lamp:after {

  content:'';

  position:absolute;

}

.lamp:before {

  left:-1.65rem;

  bottom:-4rem;

  width:4rem;

  height:4rem;

  border-radius:50%;

  background:rgba(255,255,255,0.03);

  box-shadow:inset 2px -2px 10px rgba(255,255,255,0.07);

  transition:all .15s;

}

.gonna-give-light, 

.gonna-give-light:before{

  position:absolute;

}

.gonna-give-light {

  top:10.05rem;

  left:.25rem;

  width:0;

  height:1.5rem;

  border-right:.2rem solid rgba(255,255,255,0.05);

}

.gonna-give-light:before {

  content:'';

  top:1.5rem;

  left:-.35rem;

  width:.9rem;

  height:.9rem;

  border-radius:50%;

  border:.2rem solid rgba(255,255,255,0.05);

  box-shadow:0px 0px 50px rgba(255,255,255,0);

}

input[value="on"]:checked ~ .lamp:before {

  background:rgba(255,255,255,1);

  box-shadow:0px 2px 10px rgba(255,255,255,0.8),

             0px 5px 50px rgba(255,255,255,0.8),

             0px 8px 80px rgba(255,255,255,0.6),

             0px 8px 120px rgba(255,255,255,0.6);

}

body {background:#2f323c;}

html, body {

  width:100%;

  height:100%;

}

<div id="lamp">

  <input type="radio" name="switch" value="on" />

  <input type="radio" name="switch" value="off" checked="checked"/>

  <label for="switch" class="entypo-lamp"></label>

  <div class="lamp">

    <div class="gonna-give-light"></div>

  </div>

</div>