A floating ghost.
CSS
@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%;}
HTML
<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>
Comment With The Topic