Edit in JSFiddle

<div class="center">
  <input type="checkbox">
</div>
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

input {

  &[type="checkbox"] {
    position: relative;
    width: 80px;
    height: 40px;
    background: #f7cfc6;
    outline: none;
    border-radius: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    &:before {
      content: '';
      position: absolute;
      width: 32px;
      height: 32px;
      border-radius: 20px;
      top: 4px;
      left: 4px;
      background: #eb9c85;
			z-index: 2;
      -webkit-transition: .2s;
      -moz-transition: .2s;
      -ms-transition: .2s;
      -o-transition: .2s;
      transition: .2s;
    }
		
		&:after {
			content: 'off';
			font-size: 16px;
			color: #902e12;
			position: absolute;
			top: 10px; right: 15px;
			z-index: 1;
		}

    &:checked {
      background: #cfe8d6;

      &:before {
        left: 44px;
				background: #92c7a3;
      }
			
			&:after {
			content: 'on';
			color: #2a7e43;
			top: 10px; right: auto; left: 17px;
		}
    }
  }
}