<body>
  <h1>Apple Style Toggle</h1>
    <div id="appleStyle">
  <input id="toggle" type="checkbox"/>
  <label id="control" for="toggle"></label>
  <div id="container"></div>
  </div> 
</body>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300);

$lightGrey:#bdc3c7;
$green:#2ecc71;
$anim:cubic-bezier(.55,0,.1,1);

body{
font-family:'Source Sans Pro';
color:#7f8c8d;
text-align:center;
  h1{
  margin-top:40px;  
  }
}

#appleStyle{
position:absolute;
left:50%;
top:40%;
transform:translateX(-50%);
  #toggle{
  display:none;
  &:checked ~ #container{
  background:$green;
  border:1px solid $green;
  transition:.2s $anim;
  }
  &:checked ~ #control{ 
  transform:translate(30px);
  transition:.2s $anim;
  }
  }//#toggle
  #control{
  background:white;
  border-radius:40px;
  display:block;
  height:34px;
  margin-left:4px;
  position:relative;
  transition:.2s $anim;
  width:34px;
  z-index:2;
  }//#control 
  #container{
  background:$lightGrey;
  border-radius:40px;
  border:1px solid $lightGrey;
  height:40px;
  position:relative;
  transform:translateY(-38px);
  transition:.2s $anim;
  width:70px;
  }//#container
}//#appleStyle
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.