A Pen by Thomas Kimura.

index.html

<div class="row dark">
  <div class="toggle">
    <input type="checkbox" class="check">
      <div class="switch darkSwitch"></div>
      <div class="track darkTrack"></div>
      <div class="light darkLight"></div>
  </div>
</div>

<div class="row">
  <div class="toggle">
    <input type="checkbox" class="check">
      <div class="switch lightSwitch"></div>
      <div class="track lightTrack"></div>
  </div>
</div>
  

style.css

body{margin:0px;}

.row{
  position:relative;
  height:50vh;
  width:100%;
}

.dark{
  background:#222;}
.darkSwitch{
  background:#222;
  box-shadow: 0px 0px 5px 1px #1a1a1a;}
.darkTrack{
  background:#1d1d1d;
  box-shadow: inset 0px 0px 10px 1px #1a1a1a;}
.darkLight{
  background:#1d1d1d;
  box-shadow: inset 0px 0px 2px 0px #1a1a1a;}

.lightSwitch{
  background:#fff;}
.lightTrack{
  background:#eee;}

.toggle{
  position:absolute;
  width:100px;
  height:50px;
  top:50%;
  left:0;
  right:0;
  margin:0 auto;
  text-align:center;
  z-index:1;
  border-radius:100px;}

.check{
  height:100%;
  width:100%;
  border-radius:50%;
  cursor:pointer;
  opacity:0;
  margin:0px;
  z-index:2;}

.switch{
  position:absolute;
  top:5px;
  left:5px;
  height:40px;
  width:40px;
  border-radius:40px;
  z-index:-1;
  transition: all 0.5s cubic-bezier(.95, .25, .30, .65);}

.track{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  border-radius:50px;
  z-index:-2;
  transition: all 0.5s cubic-bezier(.95, .25, .30, .65);}

.light{
  position:absolute;
  top:-30px;
  left:0;
  right:0;
  margin:0 auto;
  width:10px;
  height:10px;
  border-radius:10px;
  transition: all 0.2s cubic-bezier(.95, .25, .30, .65) 0.3s;}

.check:checked ~ .switch{
  left:55px;}

.check:checked ~ .light{
  background:#2ecc71;
  }

.check:checked ~ .lightTrack{
  background:#2ecc71;
  }

Toggle-Buttons.markdown

Toggle Buttons

A Pen by Thomas Kimura on CodePen.

License.