A Pen by Saminou yengue kizidi.

index.html

<p class="title">Dribbble Shot by - <a href="http://dribbble.com/kevinG" target="_blank">kevinG</a></p>
<a href="http://drbl.in/iKXi" target="_blank"><img src="http://dribbble.s3.amazonaws.com/users/61631/screenshots/1224764/power_control_ae.gif" /></a>
<div class="bg">
  <div class="checkbox">
    <input id="check1" type="checkbox">
    <label for="check1"></label>
    <input id="check2" type="checkbox">  
    <label for="check2"></label>
    <div class="left">
      OFF<br /><br /><br />ON
    </div>
    <div class="right">
      OFF<br /><br /><br />ON
    </div>
  </div>
</div>

Light-Switch.markdown

Light Switch

Dribbble Shot by - Griffin Moore - http://dribbble.com/okgriffin

A Pen by Saminou yengue kizidi on CodePen.

License.

style.css

body {
  background: #262626;
  color: #141414;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: bold;
}
a {
  color: #04fbf3;
  text-decoration: none;
}
.title {
  background: #595959 ;
  padding: 10px 1%;
  width: 98%;
}
img {
  float: left;
  height: 300px;
  margin-right: 5px;
  width: 400px;
}
.bg {
  background: #262626;
  float: left;
  height: 300px;
  position: relative;
  width: 400px;
}
.checkbox {
  color: #343434;
  font-family: Arial;
  font-weight: normal;
  line-height: 16px;
  margin: 101px 0 0 122px;
  position: relative;
}
.left {
  position: absolute;
  text-align: center;
  top: 19px;
  width: 76px;
}
.right {
  left: 88px;
  position: absolute;
  text-align: center;
  top: 19px;
  width: 76px;
}
input[type=checkbox] {
  display: none;
}
label {
  background-color: #141414;
  border-radius: 11px;
  border: 1px solid #383838;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 1);
  color: #1c1c1c;
  cursor: pointer;
  display: inline-block;
  font-size: 35px;
  height: 96px;
  margin: 0 10px 0 0;
  padding: 0;
  position: relative;
  text-align: center;
  width: 72px;
}
label:before {
  background-color: #4d4d4d;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4d4d4d), to(#141418));
  background-image: -webkit-linear-gradient(top, #4d4d4d, #141418);
  background-image:    -moz-linear-gradient(top, #4d4d4d, #141418);
  background-image:     -ms-linear-gradient(top, #4d4d4d, #141418);
  background-image:      -o-linear-gradient(top, #4d4d4d, #141418);
  border-radius: 7px;
  border-top: solid 1px #595959;
  box-shadow: 0 8px 10px rgba(5, 5, 5, 1);
  content: "\25Bc";
  display: inline-block;
  height: 32px;
  padding: 13px 0 0 2px;
  position: relative;
  text-align: center;
  top: 46px;
  transition: color 250ms ease 250ms, text-shadow 250ms ease 250ms, top 250ms linear;
  -webkit-transition: color 250ms ease 250ms, text-shadow 250ms ease 250ms, top 250ms linear;
  width: 64px;
  z-index: 1;
}
input[type=checkbox]:checked + label:before {
  color: #04fbf3;
  content: "\25Bc";
  margin: 0 0 0 0;
  text-align: center;
  text-shadow: 0px 0px 15px rgba(0, 255, 243, 1);
  top: 3px;
  transition: color 250ms ease 250ms, text-shadow 250ms ease 250ms, top 250ms linear;
  -webkit-transition: color 250ms ease 250ms, text-shadow 250ms ease 250ms, top 250ms linear;
}
input[id=check2] + label:before {
  content: "\25B2";
}
input[id=check2]:checked + label:before {
  content: "\25B2";
}